views:

372

answers:

1

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>
+1  A: 

Just use multiple class names:

<input class="required numeric mySpecialRule" ...
Craig Stuntz
I'm obviously doing this wrong as it's completely ignoring my rules :(
Nick
Start with something simpler. Get it working, *then* complicate it. :)
Craig Stuntz