【问题标题】:Remove error message after validation验证后删除错误消息
【发布时间】:2014-10-05 08:33:13
【问题描述】:

我使用 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
     }
});

【问题讨论】:

标签: jquery html css


【解决方案1】:

查看Fiddle

It also handles copy/paste by validating keypress with keyup

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

【讨论】:

  • 这是我想要的,但我希望我的所有字段都使用它。我的意思是,因为我只在顶部显示一条消息,因此当所有字段都填写在我的表单中时,我希望它是自动删除。我怎样才能做到这一点是问题
  • 我无法为您开发完整的表格。研究代码。它相当简单。您只需将它包含在您的所有输入中,并将通知统一在一个地方。但请注意。 Javascript 不能替代您的服务器端验证。
【解决方案2】:

嘿 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(); 
});

这些将在键盘事件上再次检查您的验证,我猜这就是您正在寻找的内容

【讨论】:

  • 我放置了一个隐藏的错误 div,它会在验证失败时显示。我想要实现的是,当我的所有验证字段都填充了要删除的错误消息时。请参阅上面我的验证中的错误位置。我希望隐藏该 div。
  • 尝试使用按钮点击事件: $( '#myform input[type="submit"]' ).click(function() { if ($(form).valid()) { $('#error-bubble').hide(); form.submit(); });
  • 我已经这样做了,但这会消除提交时出现的错误。我希望在填写完所有表单字段后立即将其删除。
猜你喜欢
  • 1970-01-01
  • 2018-04-19
  • 2015-04-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-16
  • 1970-01-01
  • 2011-07-19
相关资源
最近更新 更多