Итак, у меня есть несколько сценариев jquery, которые я могу использовать в качестве базовой формы немедленной проверки ввода.Каждый скрипт добавляет / удаляет класс .preventclick .valid или .invalid в поле ввода, вызывая изменение цвета границы (красный / зеленый).Каждый сценарий также заставляет кнопку отправки либо исчезать, либо исчезать, либо добавлять класс .preventclick в зависимости от допустимости поля ввода.Моя форма из 7 полей ввода находится на одной длинной прокручиваемой странице с кнопкой отправки внизу
Таким образом, каждый отдельный сценарий работает так, как задумано, когда я использую все различные типы сценариев проверки, они работают так, как задумано наполе ввода, но затухание / затухание кнопки отправки не работает должным образом.Если все входные данные действительны, и вы изменили два на недействительные, кнопка отправки исчезнет, как и предполагалось, но когда вы затем сделаете один из этих двух недействительных входных данных действительным, загорится кнопка с отображением кнопки отправки.
Мой вопрос заключается в том, как мне объединить эти отдельные сценарии, чтобы они работали так, как предполагалось, с их конкретными входными данными, но не запускали затухание на кнопке отправки, если все входные значения не возвращаются как действительные.
Сценарий проверки 1
$('#review-username').on('input', function() {
$('#review-username').addClass('review-invalid');
if (!/^[A-Za-z0-9]*$/g.test(this.value)) {
this.focus();
return false;
this.setCustomValidity('Invalid Characters, Please Use Only AlphaNumeric Characters');
$('#review-username').removeClass('review-valid');
$('#review-username').addClass('review-invalid');
}
if(this.value.length >= 5) {
$('#review-submit-button').fadeIn(2250);
this.setCustomValidity('');
$('#review-username').addClass('review-valid');
$('#review-username').removeClass('review-invalid');
$('#review-submit-button').removeClass('preventclick');
}
if(this.value.length < 5) {
$('#review-submit-button').fadeOut(1250);
$('#review-username').removeClass('review-valid');
$('#review-username').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}
if(this.value.length > 16) {
$('#review-submit-button').fadeOut(1250);
$('#review-username').removeClass('review-valid');
$('#review-username').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}
});
Сценарий проверки 2
$('#review-jobtitle').on('keyup', function(k) {
var val = $(this).val();
if (val.match(/[^a-zA-Z\s]/g)) {
$(this).val(val.replace(/[^a-zA-Z\s]/g, ''));
}
});
$('#review-jobtitle').on('input', function() {
$('#review-jobtitle').addClass('review-valid');
$('#review-jobtitle').addClass('invalid');
if (!/^[a-zA-Z\s]*$/g.test(this.value)) {
$('#review-jobtitle').removeClass('review-invalid');
$('#review-jobtitle').addClass('review-valid');
}else{
if(this.value.length >= 3) {
$('#review-submit-button').fadeIn(2250);
$('#review-jobtitle').removeClass('review-invalid');
$('#review-jobtitle').addClass('review-valid');
$('#review-submit-button').removeClass('preventclick');
}else{
$('#review-jobtitle').removeClass('review-valid');
$('#review-jobtitle').addClass('review-invalid');
}
}
if(this.value.length < 3) {
$('#review-submit-button').fadeOut(1250);
$('#review-jobtitle').removeClass('review-valid');
$('#review-jobtitle').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}else{
$('#jreview-obtitle').removeClass('review-invalid');
$('#review-jobtitle').addClass('review-valid');
}
if(this.value.length > 32) {
$('#review-submit-button').fadeOut(1250);
$('#review-jobtitle').removeClass('review-valid');
$('#review-jobtitle').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}
});
Сценарий проверки 3
$('#review-email').on('input', function() {
$('#review-email').addClass('review-invalid');
if(this.value.length >= 6) {
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(this.value.match(mailformat))
{
$('#review-submit-button').fadeIn(2250);
$('#review-email').removeClass('review-invalid');
$('#review-email').addClass('review-valid');
$('#review-submit-button').removeClass('preventclick');
}else{
$('#review-submit-button').fadeOut(1250);
$('#review-email').removeClass('review-valid');
$('#review-email').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}
}
if(this.value.length < 6) {
$('#review-submit-button').fadeOut(1250);
$('#review-email').removeClass('review-valid');
$('#review-email').addClass('invalid');
$('#review-submit-button').addClass('preventclick');
}
if(this.value.length > 64) {
$('#review-submit-button').fadeOut(1250);
$('#review-email').removeClass('review-valid');
$('#review-email').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}
});