jquery 验证器如何为错误和成功自定义 div

Question

我一直在寻找一天的时间，试图弄清楚如何让实时错误消息显示在不同的 div 中。

我为每个输入字段和每个错误使用自定义图标和 div，以及每个输入字段的成功图标。但是，当单击其他输入字段时，我一直在尝试的代码会发生奇怪的变化。

这里是 JS：

$(function validate() {
var  invalidFirstName = $("#blankField"),
    validFirstName = $('#validCheck');
  var  rules = {
    rules: {
       user_first_name: {
            required: true
        }

    errorPlacement: function (error,element) {
        if (element.attr("name") == "user_first_name"){
            (invalidFirstName).removeClass('hidden');
            (validFirstName).addClass('hidden');

        }
    },

    success: function() {
      //  if (element.attr("name") == "user_first_name"){
            (invalidFirstName).addClass('hidden');
            (validFirstName).removeClass('hidden');
       // }
    }
};

$('#briefStepOne').validate(rules);

});

如您所见，我也尝试过执行 if 语句，但它根本不起作用！任何帮助都会很棒。

这是我的 html 的布局：

 <div class="form-fields input-text">
        <div class="input-interaction-container">
            <label for="user_first_name" class="user_first_name">First Name&#42;</label>


            <input type="text" name="user_first_name" id="user_first_name" maxlength="50" class="user_first_name">
        </div>


        <div class="form-error-section pure-hidden-phone hidden" id = "blankField">
            <i class="fa fa-minus-circle"></i>
            <p>Field cannot be left blank</p>
        </div>
        <div class=" hidden form-error-section valid-icon pure-hidden-phone" id="validCheck">
            <i class="fa fa-check-circle"></i>
        </div>
    </div>

    <div class="form-fields input-text">
        <div class="input-interaction-container">
            <label for="user_last_name">Last Name&#42;</label>
            <input type="text" name="user_last_name" id="user_last_name" maxlength="50">
        </div>
        <div class=" hidden form-error-section pure-hidden-phone">
            <i class="fa fa-minus-circle"></i>
            <p>Field cannot be left blank</p>
        </div>
        <div class=" hidden form-error-section valid-icon pure-hidden-phone">
            <i class="fa fa-check-circle"></i>
        </div>
    </div>

更新的 JS 文件：

$(document).ready(function() {
    $('#briefStepOne'.validate({

        rules: {

            user_first_name: {
                required: true
            },
            user_last_name:{
                required:true
            },
            user_email_address:{
                required:true
            }
        },

        errorPlacement: function(error,element) {

            if (element.attr('name') == 'user_first_name'){

                $('#blankField').removeClass('hidden');
                $('#validCheck').addClass('hidden');
            } else if (element.attr('name') == 'user_last_name'){

                $('#last-name-empty').removeClass('hidden');
                $('#last-name-good').addClass('hidden');

            }

        },

        success: function(label) {

            if (label.attr('id') == 'user_first_name-error'){

                $('#blankField').addClass('hidden');
                $('#validCheck').removeClass('hidden');

            } else if (label.attr('id') == 'user_last_name-error'){
                $('#last-name-empty').addClass('hidden');
                $('#last-name-good').removeClass('hidden');

            }
        }


    }));
    });

Answer 1

我一直在寻找一天的时间，试图弄清楚我怎么能得到 显示实时错误消息，每个都在不同的 div 中。

这就是您拥有 jQuery Validate 插件的原因。它会自动执行此操作。换句话说，当插件尝试创建和切换自己的元素时，您尝试切换硬编码的 div 元素。

有不少语法错误...

1. rules 后缺少右大括号和逗号...

   ....
   rules: {
       user_first_name: {
           required: true
       }
   }, // <- this is missing
   errorPlacement: ....
   

2. 如果您声明invalidFirstName = $("#blankField")，那么您就不需要将invalidFirstName 放在括号内...

   (invalidFirstName).removeClass('hidden');
   

   应该是……

   invalidFirstName.removeClass('hidden');
   

   根据下面的#4，无论如何，这是一个有争议的问题。

3. 我看不到您如何调用包含您的 .validate() 方法的 $(function validate() {...。但是，这不是如何使用这个插件。 .validate() 方法应该只被调用一次以初始化表单上的插件，因为任何后续调用总是被忽略。换句话说，.validate() 位于 DOM 就绪事件处理函数内部，而不是任何其他函数或事件处理函数内部。初始化后，验证会由自动捕获的某些事件自动触发。

4. 然后您将利用the plugin's multitude of options 将动态错误消息插入div。然后插件自动切换这些错误消息的可见性。您永远不需要在 HTML 中对任何错误消息容器进行硬编码或编写一个切换 hidden 类的函数。

5. 不确定您是否只是将它们排除在 OP 之外，或者您是否真的从未使用过它们，但是，您的输入元素必须位于 <form></form> 容器内。否则此插件将无法正常工作。

---

• 请参阅the SO Tag Wiki page 以获得简单的演示和更多信息的链接。

• 还可以浏览the nearly 5000 SO questions 中有关此插件的一些工作示例。