电子邮件检查和逗号分隔检查jQuery代码在分离中正常工作，但在混合禁用提交按钮时则无法正常工作

Question

我必须函数，每个函数都查找有效的电子邮件，另一个查找逗号分隔的输入(不确定我是否有最好的逗号分隔的jQuery代码(。

但是，当我在输入框中编写适当的逗号分隔输入时，它仍然允许我单击提交按钮，这很奇怪，因为电子邮件是空的，我希望提交按钮保持禁用状态。这两个函数中的每一个都分别正常工作。

$("#category_names").on('keyup', function (event) {
$(".error").hide();
let hasError = false;
let isValid = true;
$('#category_names').each(function() {
if (($.trim($(this).val()).indexOf(",") == -1)) {
//alert('Please separate multiple keywords with a comma.');
$('#commaerror').show();
hasError = true;
} else {
$('#commaerror').hide()
hasError = false;
}
});
$('button[type="submit"]').prop('disabled', hasError);

})

$("#email").on('keyup', function() {
$(".error").hide();
let hasError = false;
let emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
let emailAddressVal = $(this).val();
if (emailAddressVal == '') {
$("#email").after('<span class="error">Please enter your email address.</span>');
hasError = true;
}
else if (!emailReg.test(emailAddressVal)) {
$("#email").after('<span class="error">Enter a valid email address.</span>');
hasError = true;
}
$('button[type="submit"]').prop('disabled', hasError);
})

Answer 1

您需要检查每个事件处理程序中两个条件(如果还有其他输入，则全部(是否有效。将所有验证代码放入函数并在事件处理程序中调用它可能是最简单的方法。例如：

function validate() {
$(".error, #commaerror").hide();
let hasError = false;
// validate category names
$('#category_names').each(function() {
if ($(this).val().indexOf(",") == -1) {
//alert('Please separate multiple keywords with a comma.');
$('#commaerror').show();
hasError = true;
}
});
// validate email
let emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
let emailAddressVal = $('#email').val();
if (emailAddressVal == '') {
$("#email").after('<span class="error">Please enter your email address.</span>');
hasError = true;
} 
else if (!emailReg.test(emailAddressVal)) {
$("#email").after('<span class="error">Enter a valid email address.</span>');
hasError = true;
}

return hasError;
}
$("#category_names, #email").on('keyup', function(event) {
$('button[type="submit"]').prop('disabled', validate());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
<label data-error="wrong" data-success="right">Enter your email</label>
<input type="email" class="form-control validate purple-border" id="email">
<br/>
<label>Enter categories:</label>
<input type="text" id="category_names" />
<br/>
</div>
<button type="submit" class="btn btn-purple purple-border" disabled="disabled">Perform Frame Classification</button>

请注意，我已经清理了您的category_names代码，但您需要添加进一步的检查，以便如果只有一个值，它仍然通过，或者类似abc,的东西不通过。您可能会发现类似

$(this).val().match(/^s*w+(s*,s*w+)*s*$/)

更有用。