JQuery在多个位置(表单顶部和表单级别)验证自定义错误消息

Moxie C

我正在使用JQuery Validate插件来处理我的表单的验证。我要求在2个地方出现错误:

  1. 表格顶部
  2. 在现场一级

我有它在现场级别上工作,但如何使它在高层和现场级别上都能工作。

在表单的顶部,我想添加以下内容:

<p>You have the following error messages:</p>

     <li>First Name - This is a required field</li>
     <li>Last Name - This a required field</li>
     <li>Email Address - This is a required field</li>

在表单级别,我显示了这样的错误消息,它正在起作用:

 First Name
 This is a required field
 [                        ]

 Last Name
 This is a required field
 [                        ]

 Email
 This is a required field
 [                        ]

这是HTML代码

 <html>
 <body>
   <div id="errormessages"></div>
   <form id="myform">
      <label for="firstname" class="required">First name</label> <input type="text" required="required" name="firstname" id="firstname" class="textInput" /></div>
      <label for="lastname" class="required">Last name</label> <input type="text" required="required" name="lastname" id="lastname" class="textInput" /></div>
      <label for="email" class="required">Email</label> <input type="text" required="required" name="email" id="email" class="textInput" /></div>
   </form>
 </body>
 <html>

在表单级别放置错误消息的jQuery代码:

   $("#myform").validate({
    rules: {
        firstname: {
            required: true
        },
        lastname: {
            required: true
        },
        email: {
            required: true
        }

    },
    errorPlacement: function(error, element) {

          error.insertBefore(element);
    }

   });   

所以我将如何构建代码以使其在两个位置都具有?

谢谢干杯

活泼的

引用OP

“那么我将如何构建在两个位置都具有的代码?”

请参阅文档中showErrors包含选项

这将为您提供一个良好的开始(需要进行一些调整)...

$("#myform").validate({
    // your rules here,

    // call back for placement of messages within form
    errorPlacement: function (error, element) {
        error.insertBefore(element);
    },

    // callback for custom error display
    showErrors: function (errorMap, errorList) {

        // summary of number of errors on form
        var msg = "Your form contains " + this.numberOfInvalids() + " errors, see details below.<br/>"

        // loop through the errorMap to display the name of the field and the error
        $.each(errorMap, function(key, value) {
            msg += key + ": " + value + "<br/>";
        });

        // place error text inside box
        $("#errormessages").html(msg);

        // also show default labels from errorPlacement callback
        this.defaultShowErrors(); 

        // toggle the error summary box
        if (this.numberOfInvalids() > 0) {
            $("#errormessages").show();
        } else {
            $("#errormessages").hide();
        }

    } // end showErrors callback
});

工作演示:http//jsfiddle.net/M5pzA/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS自定义表单验证错误消息

来自分类Dev

AngularJS自定义表单验证错误消息

来自分类Dev

CFWheels:表单验证自定义错误消息

来自分类Dev

jQuery表单URL验证自定义消息

来自分类Dev

jQuery验证自定义错误消息的位置

来自分类Dev

规则的jQuery验证程序自定义错误消息位置

来自分类Dev

django自定义表单验证错误

来自分类Dev

自定义表单和FieldRenderingControl错误

来自分类Dev

自定义错误消息和位置

来自分类Dev

在Laravel表单验证中为多个字段设置一条自定义消息

来自分类Dev

如何在Laravel表单验证错误消息中提供自定义字段名称

来自分类Dev

在 Spring 5 中,如何自定义表单验证错误消息?

来自分类Dev

表单验证规则不呈现自定义消息

来自分类Dev

带注释的表单验证-转换失败的自定义消息

来自分类Dev

HTML表单中的自定义错误消息

来自分类Dev

覆盖表单的 clean 方法以自定义错误消息

来自分类Dev

向Laravel表单添加自定义验证错误

来自分类Dev

Symfony2-自定义表单呈现验证错误

来自分类Dev

协助表单验证和自定义角色

来自分类Dev

如何使用jQuery创建自定义表单验证?

来自分类Dev

如何使用jQuery创建自定义的表单验证?

来自分类Dev

jQuery - 在表单顶部显示错误消息

来自分类Dev

在提交表单或字段变脏时显示验证消息-提交时会同时显示自定义验证消息和默认验证消息

来自分类Dev

自定义HTML5表单验证最初不显示自定义错误

来自分类Dev

用于表单验证的自定义指令

来自分类Dev

JavaScript自定义表单验证

来自分类Dev

角度自定义表单验证

来自分类Dev

Angular 表单自定义验证数据

来自分类Dev

使用Jquery验证添加自定义错误消息

Related 相关文章

热门标签

归档