如何使用选择列表验证输入字段?

Question

我需要一些关于jQuery验证插件的帮助，一个输入字段"driveamount"，该字段在选择isdrive下拉列表后具有值。

如果我选择"是"，则必须在输入字段"driveamout"中输入金额。 如果我选择"否"，则不需要输入字段"驱动器"。

这是表单的一部分：

<div class="row">
<section class="col col-6">
<label class="input">Amount
<input type="text" name="driveamount" id="driveamount" value=" ">
</label>
</section>
<section class="col col-6">
<label class="select">Is Drive 
<select name="isdrive " id="isdrive " onChange="Choice();">
<option value="">Select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</label>
</section>                                          
</div>
$.validator.addMethod('driveaway', function (value, el, param) {
if($('#isdrive').val() == "yes")
return false;
},"Please provide enter amount"); // Message added
$("#addcar").validate({
rules: {
driveamount: {
driveaway : true,
},

},
messages: {
}
}
});

Answer 1

// add the rule here
$.validator.addMethod("valueNotEquals", function(value, element, arg){
return arg !== value;
}, "Value must not equal arg.");
// configure your validation
$("form").validate({
rules: {
SelectName: { valueNotEquals: "default" }
},
messages: {
SelectName: { valueNotEquals: "Please select an item!" }
}  
});

Answer 2

终于解决了。谢谢大家。

$.validator.addMethod('driveaway', function (value, el, param) {
if($('#isdrive').val() == "yes" ){
if($('#daa').val() != ""){
return true;
}
return false;
}else if($('#isdrive').val() == "no"){
return true;
}else {
return true;
}
// if($('#isdrive').val() == " " )
//    return true;
// if($('#isdrive').val() == "yes" )
//    return false;
// if($('#isdrive').val() == "no")
//    return true;
},"Please provide enter correct amount"); // Message added
$("#addcar").validate({
rules: {
driveamount: {
driveaway : true,
},

},
messages: {
}
}
});

Answer 3

试试这个

$(document).ready(function(){
$("#isdrive").change(function() {
var selectedCountry = $(this). children("option:selected"). val();  
if(selectedCountry == "yes"){
$("#driveamount").prop('required',true);
}
else if(selectedCountry == "no"){           
$("#driveamount").removeAttr("required");
}
}); });

这是你的 HTML

<div class="row">
<section class="col col-6">
<label class="input">Amount
<input type="text" name="driveamount" id="driveamount" value=" ">
</label>
</section>
<section class="col col-6">
<label class="select">Is Drive 
<select name="isdrive" id="isdrive">
<option value="">Select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</label>
</section>                                          
</div>