jquery验证错误多个字段1自定义错误消息答案

【问题标题】：jquery validation error multiple fields 1 custom error messagejquery验证错误多个字段1自定义错误消息
【发布时间】：2015-05-06 19:15:33
【问题描述】：

我在 Stack 上环顾四周，试图找到我在 jQuery 验证中遇到的问题的解决方案。我决定将输入字段下方的错误消息更改为放置在表单上方的单个通用包罗万象的消息。我对该消息 "#error_mail" 有一个类 "hide"，当出现错误时，我想将其替换为 "error"提交/验证的字段。任何帮助将不胜感激，在此先感谢。

HTML

<form action="#" method="post" class="new_web_user" id="new_web_user" autocomplete="off">
            <p class="fields-required">
            *Required fields</p>
            <p id="error_mail" class="hide">We&#39;re sorry, the fields highlighted in red are required</p>
            <div class="field-column"> etc etc.....

$(function(){jQuery.validator.setDefaults({
             errorContainer: "#error_mail",
             errorPlacement: function(error, element) {
             error.appendTo('#error_mail');
      },
             ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input'
      });

    $('#new_web_user').validate({
              rules: {
                  web_user_title: {required: true},
                  web_user_given_name: {
                    required: true
                 },
                  web_user_family_name: {
                    required: true
                 },                  
                  web_user_email: { 
                    required:   true,
                    email:      true
                 },
                 email_confirmation: {
                    required:   true,
                      equalTo: '#web_user_email'
                 },
                 web_user_country: {
                    required:   false,
                 },
              },
              messages : {
                 web_user_title:     {
                        required: "Please select a title."
                 },
                 web_user_given_name:    {
                        required: "Firstname is required."
                 },
                 web_user_family_name:   {
                        required: "Lastname is required."
                 },
                 web_user_email:     {
                        required: "Email address is required.",
                        email: "Email address seems invalid."
                 },
                 email_confirmation:     {
                        required: "Email address is required.",
                        equalTo: "Email addresses do not match."
                 },
                 web_user_country:   {
                        required: "Please choose your country."
                 }
             },
             submitHandler:  function(form) {
                $.ajax({

【问题讨论】：

什么不起作用？问题是什么？你能提供一个codepen吗？
@james-g 我已经想通了，可能很混乱地如何将错误标签添加到我选择的容器#error_mail，但你能帮我弄清楚如何更改我在
。我想要的是类，当表单中有错误时，它当前是“隐藏”以替换为“错误”。然后在表单有效时返回“隐藏”。 Codepen？

标签： javascript jquery validation jquery-validate

【解决方案1】：

您可以使用 jQuery Validate 中提供的选项大大简化此操作：

$("#new_web_user").validate({
    errorContainer: '#error_mail',
    errorLabelContainer: '#actual_errors',
    wrapper:'li',
    //your rules and messages here
});

然后，将您的 HTML 更改为更像这样的内容：

<p id="error_mail" class="hide error">
  We&#39;re sorry, the fields highlighted in red are required 
  <ul id="actual_errors"></ul>
</p>

请注意，不要在#error_mail 上添加/删除您想要的错误类，而是始终设置它，因为它只会在出现问题时可见...

在这里查看它的工作原理：http://jsfiddle.net/cayjuwf4/

【讨论】：