基于选择文本的 Jquery 条件验证 [英] Jquery Conditional validation based on select text
问题描述
I want to make the "other" field required ONLY if the selected text in the "select1" field is "other" the rule I'm trying is: other: { required: function(element){ return $("#select1 option:selected").text() == "Other"; } } Am i doing something wrong? Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery- validation/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$('form:first').validate({
rules: {
cname: {
required: true,
},
select1: { valueNotEquals: "0" }
},
other: {
required: function(element){
return $("#select1 option:selected").text() == "Other";
}
},
messages: {
cname: "Please enter a valid naaaammmeeee.",
select1: "Please choose a valid option",
other: "Please enter a valid other value",
},
});
$.validator.addMethod("valueNotEquals", function(value, element, arg){
return arg != value;
}, "Value must not equal arg.");
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="cname"/>
</p>
<p>
<select name="select1" id="select1">
<option value="0">Please choose a value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">Other</option>
</select>
</p>
<p>
<label for="other">Other</label>
<em>*</em><input id="other" name="other"/>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
There were multiple problems mostly related to JSON formatting:
one extra
closing brackethere:select1: { valueNotEquals: "0" } },One
closing bracketmissing here at the end of therulesdefinition and just before the start ofmessagesdefinitionreturn $("#select1 option:selected").text() == "Other"; } } },
messages: {Extra
commaat end of each options were un-necessarySpace in the validate.js path (this might be a typo here in the question itslef)
here is the corrected code:
...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$('form:first').validate({
rules: {
cname: { required: true },
select1: { valueNotEquals: "0" },
other: { required: function(element){
return $("#select1 option:selected").text() == "Other";
}
}
},
messages: {
cname: "Please enter a valid naaaammmeeee.",
select1: "Please choose a valid option",
other: { required: "Please enter a valid other value"}
}
});
...
这篇关于基于选择文本的 Jquery 条件验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
