Question

我使用了jquery验证来验证我的表单。我正在显示一条错误消息，我的问题是当用户点击提交按钮时会显示消息，但是当所有字段都已填写完毕后，错误消息不会消失。我希望错误消息在所有字段都已正确填充后消失。这是我的表格

   <div class="form-group">
        <div id="error-bubble" class=" col-xs-10 col-centered"  
   style="display:none;color:red;">Fields Marked Red Are Required</div>
    </div>
    <div class="form-group">
        <div class="col-xs-10 col-centered">
            <form:input type="text" class="form-control" id="inputEmail" placeholder="Your 
     Mob Email"  path="emailId" value="${user.emailId}" ></form:input>
        </div>
    </div>
    <div class="form-group">

        <div class="col-xs-10 col-centered">
            <form:input type="text" class="form-control " id="inputFullName" 
     placeholder="Full Name" path="fullName" name="fullName" value="${user.fullName}">
     </form:input>
        </div>
    </div>
    <div class="form-group">
        <div class=" col-xs-10 col-centered">
           <input type="submit" value="Update"/>
            <input type="reset" value="Cancel" />
        </div>
    </div>


 and my jquery is 



$( "#myform" ).validate({
  rules: {
      contactNo: {
      required: true,
      minlength: 8,
      maxlength:25
    },
    officeContactNo: {
          required: true,
          minlength: 8,
          maxlength:25
        },
    fullName:{
          required:true,
          minlength:1,
          maxlength:40
    },
    title:{
        required:true
    },
    reportTo:{
        required:true
    },
    officeLocation:{
        required:true
    }
      },
      errorPlacement: function () {

          $('#error-bubble').show();
        },
        submitHandler: function(form) {  
            if ($(form).valid()) {
                 $('#error-bubble').hide();
             form.submit();}
            return false; // prevent normal form posting
     }
});

Answer 1

选中此Fiddle

It also handles copy/paste by validating keypress with keyup

尝试在示例中输入任何非数字字符。
这会让你开始。

Answer 2

Hey Abhinav我猜你正在使用jQuery验证插件，

尝试将以下属性添加到.validate（）：

onfocusout: true,
onkeyup: true,

你甚至可以在'onkeyup'事件中使用这里的函数，如：

onkeyup: function(element, event){
    if ($(form).valid()) { $('#error-bubble').hide(); 
    form.submit(); 
}

或

尝试使用按钮点击事件：

$( '#myform input[type="submit"]' ).click(function() {
  if ($(form).valid()) { $('#error-bubble').hide(); 
  form.submit(); 
});

这些将在键盘事件上再次检查您的验证，我想这就是您要找的内容

验证后删除错误消息

2 个答案: