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');
}
});



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы можете создать дополнительную функцию, которая определяет состояние кнопки отправки и вызывать ее из отдельных обработчиков.
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()
})
В общем, это хороший подход. Реорганизуйте общие фрагменты кода в единый многоразовый источник. Я не собираюсь очищать весь ваш код и говорить вам, что именно нужно сделать, но этот подход должен дать вам то, что вам нужно.
Можете ли вы сделать пример Минимальный, полный и поддающийся проверке, чтобы мы могли вам помочь.