Как присоединиться к функциям / слушателям в родительской функции

 How would I go about combining these scripts under one function/listener so that they do not interfere with one another.  The submit-button fadein/fadeout function should only fire if all inputs are valid or at least one input is invalid.

Поскольку коды стоят прямо сейчас, когда они запускают затухание / затухание для кнопки обзора-отправки, они прерываются после первого запуска любого из слушателей, переключающихся на основе отдельных входных значений, вместо того, чтобы учитывать состояния всех входов.

 I am unsure of how to create a universal function that validates each input without using things such as 

$('#review-username')

Я также не уверен, с чего начать выяснять, как применить определенные эффекты проверки к конкретным входным данным (электронная почта, имя пользователя или пароль). Каждый сценарий, который я написал ниже, работает сам по себе, проблема в том, что когда все сценарии находятся на одной странице, эффекты затухания / затухания кнопки просмотра и отправки нарушаются.

Сценарий проверки 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');
        }
});

Можете ли вы сделать пример Минимальный, полный и поддающийся проверке, чтобы мы могли вам помочь.

Gerardo BLANCO 29.05.2018 20:07
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
30
1

Ответы 1

Вы можете создать дополнительную функцию, которая определяет состояние кнопки отправки и вызывать ее из отдельных обработчиков.

function determineButtonState(){
    var bothInputsAreValid = // logic for validation
    if (bothInputsAreValid) // handle case for valid inputs
    else // handle case for invalid inputs
}

$('#review-email').on('input', function() {
    ...
    determineButtonState()
})

В общем, это хороший подход. Реорганизуйте общие фрагменты кода в единый многоразовый источник. Я не собираюсь очищать весь ваш код и говорить вам, что именно нужно сделать, но этот подход должен дать вам то, что вам нужно.

Другие вопросы по теме