This might be a simple question but I'm just picking this up so please be kind :)
Using JQuery validation, if I want a textbox to be a required field I can just add a css class of "required" to the element and it is picked up by the validation.
If I want a slightly more complex rule, ie. required with a minimum length, can I use a custom css class name as the key for a rule, or do I have to write a separate rule for each textbox I want a minimum length on? The documentation indicates that the key for a custom rule is the Name attribute of an element.
Thanks in advance, Nick
EDIT:
I have tried adding a rule and then addind the rule name to the elements as a class but it is completely ignored.
In my script:
$("#popupWindow #frmWidgetUpdate").validate({
rules: {
minLength3: {
required: true,
minlength: 3
}
},
errorClass: "field-validation-error",
highlight: function(element, errorClass) {
$(element).addClass("input-validation-error");
},
unhighlight: function(element, errorClass) {
$(element).removeClass("input-validation-error");
},
errorPlacement: function(error, element) {
error.appendTo(element.parent().find(".errorLabel"));
}
});
In my html:
<label>Widget Title:<span class="errorLabel"></span><br />
<%=Html.TextBox("WidgetTitle", _
Model.WidgetTitle, _
New With {.class = "param minLength3", _
.style = "width:100%;", _
.maxlength = "50"})%>
</label>