如何将Jquery validate()错误消息定位在文本输入框旁边

Question

正如你在我的代码中看到的，我一直使用errorPlacement方法。 我首先尝试在方法内部使用if else语句，并且错误消息至少会显示，但仅在输入框下方显示，而不是像我想要的那样并排显示。 由于我有6个输入框要测试，因此我使用switch语句，但这对我根本行不通。 我已将一些CSS应用于包含输入框的div，我不知道这是否会干扰消息的位置或其他方面。

HTML

<div id ="column1">
             <label>Name of Show</label><input type="text" name="performance" id="performance" /> 

             <label>Name of location</label> <input type="text" name="location" id="location"/>  

            <label>Date</label> <input type="text" id="date" name="date"/> 
</div>

         <div id="column2">

              <label>Time</label><input type="text" id="time" name="time"/>

              <label># of Volunteers Needed</label><input type="text" id="guests" name="guests"/>

              <label>Cover</label><input type="text" id="price" name="price"/>

        </div>

JS   

//this is just the error placement block, the other validate() code is working fine and omitted

errorPlacement: function(error, element){

                               switch(element)
                                         {
                                    case element.attr("name") === 'performance': 
                                               error.insertAfter( $("#performance") );
                                                break;
                                         case element.attr("name") === 'location':
                                                    error.insertAfter( $("#location") );
                                                     break;
                                             case element.attr("name") === 'date':
                                                        error.insertAfter( $("#date") );
                                                        break;
                                                case element.attr("name") === 'time':
                                                            error.insertAfter( $("#time") );
                                                            break;
                                                     case element.attr("name") === 'guests':
                                                          error.insertAfter( $("#guests") );
                                                                break;
                                                     case element.attr("name") === 'price':
                                                           error.insertAfter( $("#price") );
                                                                    break;
                                                                default:
                                              //nothing
                                            }

                               },

- Spilot

Answer 1

您的代码：

errorPlacement: function (error, element) {
    switch (element) {
        case element.attr("name") === 'performance':
            error.insertAfter($("#performance"));
            break;
        case element.attr("name") === 'location':
            error.insertAfter($("#location"));
            break;
        case element.attr("name") === 'date':
            error.insertAfter($("#date"));
            break;
        case element.attr("name") === 'time':
            error.insertAfter($("#time"));
            break;
        case element.attr("name") === 'guests':
            error.insertAfter($("#guests"));
            break;
        case element.attr("name") === 'price':
            error.insertAfter($("#price"));
            break;
        default:
            //nothing
    }
},

您的代码过于冗长和有些多余，至少可以这么说，需要进行优化。

error.insertAfter(element) 已经是默认设置，并且自动适用于所有字段。除非您想要做其他事情，否则无需覆盖它。

这是默认的 errorPlacement 函数：

errorPlacement: function(error, element) {
    error.insertAfter(element); // <- the default
},

error - 包含错误消息的标签对象。
element - 具有错误的输入对象。

正如您所看到的，如果您只想要将每个错误消息插入到每个元素之后，则根本不需要指定errorPlacement。

请参见此 jsFiddle，其中显示了默认的错误消息放置方式：

http://jsfiddle.net/85xwh/

您可以取消注释errorPlacement部分，并查看行为完全相同：

http://jsfiddle.net/85xwh/1/

如果您没有获得预期的消息放置位置，那么可能是由于您的CSS正在移动它，您的HTML布局正在阻止或包裹它，或者两者都有。 您没有展示足够的代码让我复制任何有意义的东西。

但是，如果您想尝试仅对错误消息应用一些 CSS，请使用类似于以下内容，假设您正在使用默认的错误容器“<label>”和默认的错误类“.error”...

label.error {
   /* my custom css */
}

- Sparky

Answer 2

我在我的项目中使用了上面提到的问题代码，与问题中的代码有一些改动，但含义相同！

对于两个输入标签（我实际上使用了带有Twitter Bootstrap和dateTimePicker插件的2个输入标签），我在两个日期选择器字段下方放置了一个额外的div，其中包含两个具有不同ID的span（jqv_msg3，jqv_msg4），并将以下内容作为我的jQuery验证脚本：

errorElement: 'p',
errorClass: 'jq_err_msg text-danger',
errorPlacement: function(error, element) {
    switch (element.attr("name")) {
        case 'datePicker1':
            error.insertAfter($("#jqv_msg3"));
            break;
        case 'datePicker2':
            error.insertAfter($("#jqv_msg4"));
            break;
        default:
            error.insertAfter(element);
    }
}

因此，上面的代码将生成一个带有类为“jq_err_msg text-danger”的P标签，但对于具有datePicker1和datePicker2的元素，它会将错误消息放在我放置的div中，并在每个两个jqv_msg3和jqv_msg4 ID的后面放置!!! 因此，我可以以这种方式将错误消息放置在我打算的任何位置，特别是对于我需要这样做的每个输入！ :-D

提示：

但请记住，我已经修改了Switch语句，使其适合要求以及其工作方式。

- Randika Vishman