正如您在我的代码中看到的那样,我一直在使用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
}
},
答案 0 :(得分:12)
您的代码:
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,其中显示了默认的错误消息展示位置:
您可以“取消评论”errorPlacement
部分,并看到行为完全相同:
如果你没有得到预期的消息放置,那可能是因为你的CSS正在移动它,你的HTML布局阻塞或包装它,或者两者的某种组合。您没有显示足够的代码来复制任何有意义的内容。
但是,如果您想尝试仅将一些CSS应用于错误消息,请使用类似这样的内容,假设您使用的是默认错误容器<label>
和默认错误类{{1 }} ...
.error
答案 1 :(得分:5)
我得到了我的项目中使用的上述问题代码,有意义但有点改变了问题!
对于两个输入标签(我实际上使用了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
声明更改为适合要求及其工作方式。