Question

我正在使用此jQuery plugin进行表单验证。使用下面发布的当前代码，验证仅在第一次在元素上发生丢失焦点/模糊事件后才开始。

但是，我希望在用户开始输入时最初执行验证。

＆＃13;

$(document).ready(function(){
  $.validate({"form" : "#testForm"});
});

＆＃13;

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/theme-default.min.css"
    rel="stylesheet" type="text/css" />
</head>
<body>
<form id="testForm">
<p>
Email
<input name="email" data-validation="email">
</p>
<p>
Username
<input name="user" data-validation="length alphanumeric" 
 data-validation-length="3-12" 
 data-validation-error-msg="User name has to be an alphanumeric value (3-12 chars)">
</p>
</form>
</body>
</html>

＆＃13;

Answer 1

当用户开始输入时，您需要keyup来触发验证：

＆＃13;

$('input').on('keyup', function() {
  $(this).validate();
});

$(document).ready(function() {
  $.validate({
    "form": "#testForm"
  });
});

＆＃13;

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/theme-default.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <form id="testForm">
    <p>
      Email
      <input name="email" data-validation="email">
    </p>
    <p>
      Username
      <input name="user" data-validation="length alphanumeric" data-validation-length="3-12" data-validation-error-msg="User name has to be an alphanumeric value (3-12 chars)">
    </p>
  </form>
</body>

</html>

＆＃13;

Answer 2

脚本： - 使用validateOnEvent

$(document).ready(function(){
  $.validate({"form" : "#testForm","validateOnEvent":true});
});

形式： -

<form id="testForm">
<p>
Email
<input name="email" data-validation="email" data-validation-event="keypress"> // data-validation-event is used for event base elements
</p>
<p>
Username
<input name="user" data-validation="length alphanumeric" 
 data-validation-length="3-12" 
 data-validation-error-msg="User name has to be an alphanumeric value (3-12 chars)" data-validation-event="keypress">
</p>
</form>

用户开始键入时最初验证表单

2 个答案: