Как выполнить условную проверку на стороне клиента с помощью плагина jquery validate
здесь я даю свой HTML. у меня есть выпадающий список, который показывает мало информации о продукте и хобби по флажку. я хочу, если пользователь выберет продуктIPOD тогда валидация не будет срабатывать для хобби, помеченных флажками другого умного огня. как выполнить этот вид условной проверки с помощью плагина jquery validate, добавив правила 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.
поэтому, пожалуйста, объясните мне, какой код проверки JQuery мне нужно написать, чтобы выполнить то же самое. Покажите мне, как сделать этот вид условной проверки, добавив правила jquery. Спасибо