Question

I am using JQuery validator plugin on ASP.NET MVC Page as below.

1). Here on update button click, Validation messages are displaying fine.
2). Zipcode Min length is 5 and max is 9 and is a required field and only digits.

The problem is even if we enter more than 9 digits, it is displaying the validatin message and but updating it to the database. If it fails any of the validation rules, it should not update it to the database.

Is there anything that i am missing in validation rules like ‘return true/false’.

//Validate form on btnUpdateProfile button click

$("#frmCustDetails").validate({
    rules: {
        "AddressDetail.ZipCode": {
            required: true,
            digits: true,
            minlength: 5, 
            maxlength: 9
            }
        },
    messages: {
        "AddressDetail.ZipCode": {
            required: "please enter zipcode",
            digits: "please enter only digits",
            minlength: "Min is 5", 
            maxlength: "Max is 9"
        }
    }
});

<table>
  <tr>
    <td class="Form_Label"><label for="Zip">Zip</label><em>*</em></td>
    <td CssClass="Form_Value"><%= Html.TextBox("AddressDetail.ZipCode", Model.AddressDetail.FirstOrDefault().ZipCode, new { @class = "required zip", minlength = "5"})%>
    </td>
  </tr>

  <tr>
    <td colspan="2" align="center"><input type="submit" id="btnUpdProfile" value="Update" /></td>
  </tr>
</table>

Answer 1

Is the submission handled via AJAX? If so, you might want to use the submitHandler option for the validation plugin and do your submission from there instead of a separately applied handler. If using a separately applied handler, you might want to check that the form is valid (using the valid() method) before doing the submission.