我正在尝试制作一个选择"报价"的形式,如果选择了"租金"选项,那么它会使"平租"成为必需的,但如果选择"销售",那么它就会需要"saleflat"。我不知道该怎么做。
我正在使用jQuery Form插件。
<form id="item" name="item" method="post" action="">
<fieldset>
<h3>Type</h3>
<label for="property_type">offer</label>
<div class="input">
<select id="property_type" name="property_type">
<option selected="selected" value="">Select your offer</option>
<option value="rent">rent</option>
<option value="sale">sale</option>
</select>
</div>
</fieldset>
<fieldset class="rent clearfix hide">
<label for="requiered by rent">show + requiered by rent</label>
<select id="rentflat" name="rentflat">
<option selected="selected" value="">Select</option>
<option value="1">condition 1</option>
<option value="2">condition 2</option>
</select>
</fieldset>
<fieldset class="sale clearfix hide">
<label for="requiered by sale">show requiered by sale</label>
<select id="saleflat" name="saleflat">
<option selected="selected" value="">Select</option>
<option value="1">condition 1</option>
<option value="2">condition 2</option>
</select>
</fieldset>
<button type="submit" class="btn">inserieren</button>
</form>
我的验证脚本
$(document).ready(function () {
$("#item").validate({
rules: {
property_type: {
required: true,
rentflat: {
depends: function () {
return $('#item select[name="property_type"]').val() === 'rent';
}
},
saleflat: {
depends: function () {
return $('#item select[name="property_type"]').val() === 'sale';
}
}
},
messages: {
property_type: "offer is required!",
rentflat: "rentflat is required!",
saleflat: "saleflat is required!"
}
}
});
});
一个生活的例子在这里 JSBin
你的嵌套语法都搞砸了。
你的代码和我的评论:
rules: {
property_type: {
required: true,
rentflat: { // <-- does not go inside of 'property_type'
// depends function belongs inside of a rule
depends: function () {
return $('#item select[name="property_type"]').val() === 'rent';
}
},
saleflat: { // <-- does not go inside of 'property_type'
// depends function belongs inside of a rule
depends: function () {
return $('#item select[name="property_type"]').val() === 'sale';
}
}
},
messages: { // <-- does not go inside of 'rules' option
property_type: "offer is required!",
rentflat: "rentflat is required!",
saleflat: "saleflat is required!"
}
}
1)您错误地将messages
放入rules
。 他们是兄弟姐妹。
2)您错误地将rentflat
和saleflat
字段:规则声明放在property_type
字段:规则声明中。 同样,所有 field:rule 声明都是彼此的同级声明,因此您不能将一个声明放入另一个声明中。
3)您的depends
功能是正确的。 但是,您没有将depends
函数分配给规则。 depends
函数必须是required
规则声明(内部)的值。
固定版本:
// this is the 'rules' option
rules: {
property_type: { // <-- field name
required: true // <-- rules
},
rentflat: { // <-- field name
required: { // <-- rules
// depends function inside of 'required' rule
depends: function () {
return $('#item select[name="property_type"]').val() === 'rent';
}
}
},
saleflat: { // <-- field name
required: { // <-- rules
// depends function inside of 'required' rule
depends: function () {
return $('#item select[name="property_type"]').val() === 'sale';
}
}
}
},
// this is the 'messages' option, sibling of 'rules' option
messages: {
property_type: "offer is required!",
rentflat: "rentflat is required!",
saleflat: "saleflat is required!"
}
工作版本:http://jsfiddle.net/knLXp/