使用jquery-validate 1.11.0
在我的表格中,我的条件是如果在字段A中输入文本,则字段B& C成为必需品。如果在字段B中输入文本,则A& C成为必需等等。此外,如果任何文本在字段D中,请将其清除。
如果在字段D中输入文本,则清除字段A,B,C并使其不是必需的。
我有一个错误,如果我先填写字段A,它似乎提交绕过其他2个字段。如果我首先填写字段b或c,则确保需要字段A.
http://jsfiddle.net/rockitdev/mxtXX/47/
<form id="search" name="search" method="post" action="">
<label for="a">Text A</label>
<input id="a" type="text" class="search-person" />
<label for="b">Text B</label>
<input id="b" type="text" class="search-person" />
<label for="c">Text C</label>
<input id="c" type="text" class="search-person" />
<label for="d">Text D</label>
<input id="d" type="text" class="search-hcn" />
<p>
<input class="btn btn-primary" type="submit" value="Submit" />
</p>
</form>
$('.search-person').focus(function () {
$('.search-hcn').val(' ').removeClass("required");
$('.search-person').addClass("required");
});
$('.search-hcn').focus(function () {
$('.search-person').val(' ').removeClass("required");
$('.search-hcn').addClass("required");
});
$('#search').validate();
答案 0 :(得分:6)
您可以使用validate plugin提供的depends
选项来执行此操作。
注意:删除值不是验证的一部分
$('#search').validate({
rules: {
a: {
required: {
depends: function(element) {
return $('#b').val().length > 0 || $('#c').val().length > 0
}
}
},
b: {
required: {
depends: function(element) {
return $('#a').val().length > 0 || $('#c').val().length > 0
}
}
},
c: {
required: {
depends: function(element) {
return $('#a').val().length > 0 || $('#b').val().length > 0
}
}
},
d: {
required: {
depends: function(element) {
return $('#a').val().length == 0 || $('#b').val().length == 0 && $('#c').val().length == 0
}
}
}
}
});
演示:Fiddle
答案 1 :(得分:3)
在name
字段上设置input
属性可以解决问题。
<form id="search" name="search" method="post" action="">
<label for="a">Text A</label>
<input id="a" type="text" class="search-person" name="person1" />
<label for="b">Text B</label>
<input id="b" type="text" class="search-person" name="person2" />
<label for="c">Text C</label>
<input id="c" type="text" class="search-person" name="person3" />
<label for="d">Text D</label>
<input id="d" type="text" class="search-hcn" name="hcn" />
<p>
<input class="btn btn-primary" type="submit" value="Submit" />
</p>
</form>
debug
选项对于查找此类错误非常有用。
$('#search').validate({debug: true});