从第一次按键开始 jquery Validate [重复]

Question

我正在使用 jquery Validate 来验证输入

$("#myForm").validate({
    rules : {
        "name" : { 
            required : true,
            minlength : 10,
            maxlength : 50,
            alphanumeric: true
        }
    },
    messages : {
        "name" : {
            required : "Name is required!",
            minlength : "Enter number of characters between 10 and 50."
        }
    },
    success: function(label,element) {
        $("#errorMsgDiv").html("");
        },
    submitHandler : function(form) {
        form.submit(); 
    },
    errorPlacement: function(error, element) {
        $("#errorMsgDiv").html("");
        error.appendTo('#errorMsgDiv'); 
    }
});

jsp页面上的文字输入是

<form:input path="name" class="form-control" autocomplete="off" placeholder="Enter Name" id="existingValue" required="required"/>
<div class="col-md-6 col-sm-6" id="errorMsgDiv">

现在，验证发生/验证消息仅在从文本输入更改焦点后出现。 如何在文本中输入第一个字符后立即运行验证而不等待焦点更改？

Answer 1

正如我在对 Apple Orange 答案的评论中所说，不应使用他/她的解决方案，因为在极端情况下您会过早提交经过验证的表单。

如果您想走重点路线，这将为您解决问题。对于每个keyup 事件，提交按钮将获得焦点，然后您输入的输入将重新获得焦点。

$(document).ready(function () {
  $(".name, .email").keyup(function(e){
  	$('#sbt').focus();
    $(this).focus();
  });
  
  $("#form").validate({
      rules: {
          "name": {
              required: true,
              minlength: 5
          },
          "email": {
              required: true,
              email: true
          }
      },
      messages: {
          "name": {
              required: "Please, enter a name"
          },
          "email": {
              required: "Please, enter an email",
              email: "Email is invalid"
          }
      },
      submitHandler: function (form) { // for demo
          alert('valid form submitted'); // for demo
          return false; // for demo
      }
    });
});

body {
    padding: 20px;
}

label {
    display: block;
}

input.error {
    border: 1px solid red;
}

label.error {
    font-weight: normal;
    color: red;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>

<form id="form" method="post" action="#">
    <label for="name">Name</label>
    <input type="text" name="name" class="name" />
    <label for="email">Email</label>
    <input type="email" name="email" class="email" />
    <button type="submit" id="sbt">Submit</button>
</form>