这里我给的是我的HTML。我有一个下拉列表，显示很少的产品信息，并通过复选框显示爱好。我想如果用户选择产品 iPod 那么验证将不会激发兴趣爱好复选框其他明智的火。如何通过jquery validate plugin添加jquery规则来执行这种条件验证。
<form name="TestVal" method="post" action="/" novalidate="novalidate">
<div class="form-horizontal">
<h4>DateValTest</h4>
<hr>
<div class="form-group">
<label style="padding-top: 0px;" for="Products" class="control-label col-md-2">Products</label>
<div class="col-md-10">
<select name="SelectedProductId" id="SelectedProductId" data-val-required="Select any Product" data-val-number="The field SelectedProductId must be a number." data-val="true">
<option value="">-- Select Product--</option>
<option value="1">IPhone</option>
<option value="2">MacBook Pro</option>
<option value="3">iPod</option>
</select>
<span data-valmsg-replace="true" data-valmsg-for="SelectedProductId" class="field-validation-valid text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10 input-validation-error">
<b>Hobbies</b><br>
<input type="checkbox" value="true" name="Hobbies[0].IsSelected" id="Hobbies" data-val-required="The IsSelected field is required." data-val="true" class="hobbycls"><input type="hidden" value="false" name="Hobbies[0].IsSelected">
<label for="Hobbies_0__IsSelected">Reading</label>
<input type="hidden" value="Reading" name="Hobbies[0].Name" id="Hobbies_0__Name"><input type="checkbox" value="true" name="Hobbies[1].IsSelected" id="Hobbies" data-val-required="The IsSelected field is required." data-val="true" class="hobbycls"><input type="hidden" value="false" name="Hobbies[1].IsSelected">
<label for="Hobbies_1__IsSelected">Sports</label>
<input type="hidden" value="Sports" name="Hobbies[1].Name" id="Hobbies_1__Name"><input type="checkbox" value="true" name="Hobbies[2].IsSelected" id="Hobbies" data-val-required="The IsSelected field is required." data-val="true" class="hobbycls"><input type="hidden" value="false" name="Hobbies[2].IsSelected">
<label for="Hobbies_2__IsSelected">Movies</label>
<input type="hidden" value="Movies" name="Hobbies[2].Name" id="Hobbies_2__Name">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Submit">
</div>
</div>
</div>
</form>
<script type="text/javascript">
var declarationsError = $('#Hobbies-error');
$('form').submit(function () {
if ($("#SelectedProductId option:selected").text() != 'iPod') {
if ($(".hobbycls:checkbox:checked").length <= 0) {
declarationsError.empty();
declarationsError.append("<span>Select Any Hobbie's checkbox</span>");
declarationsError.show();
return false;
} else {
declarationsError.empty();
declarationsError.hide();
}
}
declarationsError.hide();
return true;
});
$('.hobbycls').change(function () {
if ($(this).is(':checked')) {
declarationsError.empty();
declarationsError.hide(); // hide error message
}
});
</script>
上面的脚本运行正常但我想使用jquery validate plugin添加规则来做同样的事情。
所以请指导我需要编写的jquery验证代码来执行相同的操作。告诉我如何通过添加jquery规则来进行这种条件验证。感谢
答案 0 :(得分：0)
您在制作的HTML中有一些错误：
您可以使用jQuery验证器添加新规则，以完全重复您在两个jQuery函数中执行的操作：
你忘了给出Hobbies-error元素，所以我使用了div。
在下面的代码段中：
<style name="liteMode_Dialog" parent="@style/Theme.AppCompat.Dialog">
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowBackground">@null</item>
<item name="android:windowIsFloating">false</item>
</style>
var validator;
// a new rule is required to test if iPod is selected and checkboxes are...
$.validator.addMethod('checkboxMaxIfiPodNotSelected', function (value, elem, param) {
var selectedOptionVal = $(param.selEleiSiPod).val().trim();
var selectedOptionText = $(param.selEleiSiPod).text().trim();
if (selectedOptionText != 'iPod') {
if (selectedOptionVal.length > 0) {
if ($(':checkbox.' + elem.classList[0] + ":checked").length <= param.max) {
$('#Hobbies-error').empty().append("<span>Select Any Hobbie's checkbox</span>").show();
return false;
}
} else {
$('#Hobbies-error').empty().append("<span>Select a Product</span>").show();
return false;
}
}
$('#Hobbies-error').empty().hide();
return true;
});
$(function () {
// build the dynamic rules....
var myRules = {};
var myMessages = {};
$(':checkbox.hobbycls').each(function (index, element) {
myRules[element.name] = {
checkboxMaxIfiPodNotSelected: {
max: 0,
selEleiSiPod: '#SelectedProductId option:selected'
}
};
myMessages[element.name] = {
checkboxMaxIfiPodNotSelected: function(params, element) {
// it's not usefull to return a true error message because I used a div
// but this is up to you how to manage and place the errors
return '';
}
};
});
// use the rules and messages with validator...
validator = $('form').validate({
rules: myRules,
messages: myMessages,
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});