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
                                            }

                               },

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 - 包含错误消息的label对象 element - 包含错误的输入对象。

如您所见，如果您只是希望在每个元素之后插入每条错误消息，则根本不需要指定errorPlacement。

请参阅此jsFiddle，其中显示了默认的错误消息展示位置：

http://jsfiddle.net/85xwh/

您可以“取消评论”errorPlacement部分，并看到行为完全相同：

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

如果你没有得到预期的消息放置，那可能是因为你的CSS正在移动它，你的HTML布局阻塞或包装它，或者两者的某种组合。您没有显示足够的代码来复制任何有意义的内容。

但是，如果您想尝试仅将一些CSS应用于错误消息，请使用类似这样的内容，假设您使用的是默认错误容器<label>和默认错误类{{1 }} ...

.error

Answer 2

我得到了我的项目中使用的上述问题代码，有意义但有点改变了问题！

对于两个输入标签（我实际上使用了Twitter Bootstrap，dateTimePicker插件的那2个输入标签）我在两个日期选择器字段下面添加了div，其中两个具有两个不同ID（jqv_msg3, jqv_msg4）的跨度，并将以下内容作为我的jQuery Validation script：

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

因此，上面的代码会生成带有P 类的 jq_err_msg text-danger标记，但对于包含datePicker1和datePicker2的元素，它会放置我放置的div旁边的错误消息，以及ID为 spans和jqv_msg3 的两个jqv_msg4中的每一个之后！

所以我可以将错误消息放在我想要的地方，特别是对于我需要做的每个输入！ :-D

<强>提示：

但请记住这一点，我已将Switch声明更改为适合要求及其工作方式。

如何在我的文本输入的一侧定位Jquery validate（）错误消息

2 个答案: