Как унифицировать JS валидационные скрипты - PullRequest
0 голосов
/ 28 мая 2018

Итак, у меня есть несколько сценариев 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');
        }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...