电子邮件检查和逗号分隔检查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*$/)

更为有用。