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

更有用。

电子邮件检查和逗号分隔检查 jQuery 代码在分隔时可以正常工作，但在混合使用时不能用于禁用提交按钮

email check and comma separated check jQuery codes work correctly in separation but not when mixed for disabling the submit button

html

jquery

form-submit