jQuery 验证插件 - 在模糊时验证空白字段

Question

我正在使用 jQuery Validation Plugin 来验证我网站上的表单。它在需要一定数量的字符或特定格式（例如电子邮件）的字段上工作正常，但如果有人关注所需的输入然后在不输入任何内容的情况下跳出它，它不会立即显示错误。我想要它做的是，如果有人关注一个必需的输入，然后在没有输入任何内容的情况下移动到另一个字段（模糊），它会立即显示错误。这可能吗？

$(function() {
  $('#contact').validate({
    rules: {
      fname: 'required',
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      fname: 'Please enter your first name',
      msgemail: 'Please enter a valid email address'
    }
  });
});

input {
  display:block;
  margin-top:20px;
}

label.error {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<form id="contact">
  <input type="text" name="fname" placeholder="First name" /> <!-- This should show error if left empty on blur -->
  <input type="text" name="email" placeholder="Email" />
</form>

Answer 1

调用构造函数时添加onfocusout事件。

$(function() {
  $('#contact').validate({
    onfocusout: function(element) { 
        $(element).valid(); 
    },
    rules: {
      fname: 'required',
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      fname: 'Please enter your first name',
      msgemail: 'Please enter a valid email address'
    } 
  });
});

input {
  display:block;
  margin-top:20px;
}

label.error {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<form id="contact">
  <input type="text" name="fname" placeholder="First name" /> <!-- This should show error if left empty on blur -->
  <input type="text" name="email" placeholder="Email" />
</form>

jQuery 验证插件 - 在模糊时验证空白字段

jQuery validation plugin - validate empty field on blur

jquery

jquery-validate