5

正如您将在我的代码中看到的那样，我一直在使用 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
                                            }

                               },
4

2 回答 2

13

你的代码：

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>和默认错误类，.error...

label.error {
   /* my custom css */
}
于 2013-10-17T17:45:10.393 回答
5

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

对于两个输入标签（我实际上已将这两个输入标签与Twitter Bootstrap,dateTimePicker插件一起使用），我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标记为 class ofjq_err_msg text-dangerdatePicker1但对于具有and的元素datePicker2，它会将错误消息放在div我放置的一侧，并在两个spansID 为jqv_msg3andjqv_msg4的后面！

所以我可以以这种方式将错误消息放在我想要的任何位置，特别是对于我需要执行的每个输入！:-D

暗示：

但请记住这一点，我已经改变了Switch声明以适应需求以及它的工作方式。

于 2014-09-07T13:58:26.617 回答