我成功验证了Chosen插件选择表单。但是,我在更改错误的位置时遇到问题。它总是出现在元素的顶部。
这是我的代码:
<script>
$('#form-scriptolution-soft-post-image').on('submit', function() {$('.chzn-done').valid();
});
</script>
<div class="field">
<label>
<h4>{$lang260}<span> *</span></h4>
</label>
<select name="CID" id="CID" required style="width:389px; height: 30px;" data- placeholder="Choose..." >
<option value=""></option>
{section name=i loop=$c}
<option value="{$c[i].CID}">{$c[i].cname}</option>
{/section}
</select>
<p class="info">some text</p>
</div>
我希望错误出现在“some text”的
元素中
我一直在尝试使用以下内容,它适用于我的所有其他表单元素:
errorElement: 'p',
errorClass: 'error',
errorContainer: ".field p"
任何想法都将不胜感激
我能够解决这个问题。以下是我的代码现在的样子:
<script type="text/javascript">
$(document).ready(function(){
$('#form-scriptolution-soft-post-image').validate(
{
ignore: "",
rules: {
image: {
required: true
},
CID: {
required: true
},
title: {
required: true
},
tags: {
required: true
},
},
errorPlacement: function (error, element) {
$('.field p').html(error);
},
});
});
jQuery.extend(jQuery.validator.messages, {
required: "This is a required field.",
});
// end document.ready
</script>
<div class="field">
<label>
<h4>{$lang260}<span> *</span></h4>
</label>
<select name="CID" id="CID" required style="width:389px; height: 30px;" data- placeholder="Choose..." >
<option value=""></option>
{section name=i loop=$c}
<option value="{$c[i].CID}">{$c[i].cname}</option>
{/section}
</select>
<p class="info">some text</p>
</div>
我所做的是在验证代码中添加ignore: "",
,以便验证插件不会忽略隐藏字段。 Chosen插件实际上隐藏了默认的选择字段。我可以通过添加以下p
选项在errorPlacement
元素I的位置输出错误:
errorPlacement: function (error, element) {
$('.field p').html(error);
现在一切都按预期工作了。 谢谢!
答案 0 :(得分:2)
您可以使用其功能更改错误放置的位置。这是一个例子:
$("#form").validate({
rules: {
operations:
{
required: true
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == "operations") {
error.insertAfter("#operations_chosen");
}else{
error.insertAfter(element);
}
}
});
答案 1 :(得分:0)
只需测试valid()
的结果并使用JQuery选择器自行更改文本。
<script>
$('#form-scriptolution-soft-post-image').on('submit', function() {
if(!$('.chzn-done').valid()){
$('.field p').html('You must select a choice!');
return false;
} else {
return true;
}
});
</script>