代码之家 › 专栏 › 技术社区 › Mona Jalal

email check和逗号分隔的check jQuery代码在分隔中可以正常工作,但是当混合使用以禁用submit按钮时,则不能正常工作

form-submit jquery html

Mona Jalal · 技术社区 · 6 年前

我必须使用这样的函数:它们中的每一个都查找有效的电子邮件,而另一个则查找逗号分隔的输入(不确定是否有最好的逗号分隔jQuery代码)。

但是,当我在输入框中输入正确的逗号分隔的输入时,它仍然允许我单击submit按钮,这很奇怪,因为电子邮件是空的,我希望提交按钮保持禁用状态。这两个功能分别正常工作。

$("#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);
})

1 回复 | 直到 6 年前

Nick SamSmith1986 6 年前

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*$/)