Como executar a validação condicional do lado do cliente pelo jquery validate plugin
aqui estou dando meu html. Eu tenho um menu suspenso que mostra poucas informações sobre o produto e mostra hobbies por caixa de seleção. eu quero se o usuário selecionar o produtoiPod a validação não será acionada para caixas de seleção de hobbies, de outra forma. como executar esse tipo de validação condicional pelo jquery validate plugin adicionando regras 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>
No momento, estou fazendo a validação do lado do cliente dessa maneira<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>
o script acima está funcionando bem, mas eu quero fazer o mesmo usando o jquery validate plugin adicionando regras.
então, por favor, me guie o código de validação jquery que preciso escrever para executar o mesmo. mostre-me como fazer esse tipo de validação condicional adicionando regras de jquery. obrigado