How to validate US ZIP code using jQuery Validation plugin

Question

I am using the jQuery Validation plugin for validating my form.

I want to validate the zip code as per US ZIPCode format :-

> 12345
> 12345-6789
> 12345 6789

As per my curent code its validating the zipcode should be maximum 5 and all numeric.

Please see the code below:

    <script src="~/Scripts/js/jquery.validate.js"></script>

<script>

    $().ready(function () {

        // validate signup form on keyup and submit
        $("#locationSetup").validate({
            rules: {
                'Address.AddressStreet': "required",
                'Address.City': "required",
                'Address.State.Country.CountryIsoCode': "required",
                'Address.State.SubnationalIsoCode': "required",
                'Address.PostalCode': {
                    required: true,
                    minlength: 5,
                    maxlength: 5,
                    digits: true
                }
            },
            messages: {
                'Address.AddressStreet': "Please enter your Street Address!",
                'Address.City': "Please select your City!",
                'Address.State.Country.CountryIsoCode': "Please  select your Country!",
                'Address.State.SubnationalIsoCode': "Please  select your State!",
                'Address.PostalCode': {
                    required: "Please enter your Postal Code!",
                    minlength: "Your Postal Code must be 5 numbers!",
                    maxlength: "Your Postal Code must be 5 numbers!",
                    digits: "Your Postal Code must be 5 numbers!"
                }
            }
        });

    });
</script>

@using (Html.BeginForm(Model.Step.ToString(), "Provision", FormMethod.Post, new Dictionary<string, object> { { "id", "locationSetup" } }))

<table width="100%" id="locInfo">
            <colgroup>
                <col width="30%" />
                <col />
            </colgroup>
            <tr>
                <th><label>@AddressResource.COUNTRY_LABEL_TEXT:</label> <span class="redtext">(Required)</span></th>
                <td>
                   @* @Html.HiddenFor(m => m.Address.State.Country.CountryIsoCode)*@
                   @Html.DropDownListFor(m => m.Address.State.Country.CountryIsoCode, ProvisioningHubProxy.GetCountriesList(),
                                htmlAttributes: new { @id = "Countries", @name = "Countries" })
                </td>
            </tr>
            <tr>
                <th> <label>@AddressResource.STATES_LABEL_TEXT:</label><span class="redtext">(Required)</span></th>
                <td> @Html.DropDownListFor(m => m.Address.State.SubnationalIsoCode, ProvisioningHubProxy.GetStatesList(),
                                htmlAttributes: new { @id = "States", @name = "States" })</td>
            </tr>
            <tr>
                <th><label>@AddressResource.CITY_LABEL_LABEL_TEXT:</label><span class="redtext">(Required)</span></th>
                <td> @Html.TextBoxFor(m => m.Address.City, htmlAttributes: new { @name = "City", @id = "City" })</td>
            </tr>
            <tr>
                <th> <label>@AddressResource.STREET_NAME_LABEL_TEXT:</label><span class="redtext">(Required)</span></th>
                <td>@Html.TextBoxFor(m => m.Address.AddressStreet, htmlAttributes: new { @name = "StreetName", @id = "StreetName" })</td>
            </tr>
            <tr>
                <th><label>@AddressResource.US_POSTAL_CODE_LABEL_TEXT:</label><span class="redtext">(Required)</span></th>
                <td>@Html.TextBoxFor(m => m.Address.PostalCode, htmlAttributes: new { @name = "ZipCode", @id = "ZipCode", @required = "required" })</td>
            </tr>
        </table>

}

Please suggest.

possible duplicate of jQuery validation plugin: accept only US, Canada and Mexic zip code? — Blazemonger
– Blazemonger, Commented Sep 25, 2013 at 18:07
There's already a rule called zipcodeUS inside the additional-methods.js file. — Sparky
– Sparky, Commented Sep 25, 2013 at 22:10

Brad Christie · Accepted Answer · 2013-09-26 12:43:07Z

32

Add a custom validator:

jQuery.validator.addMethod("zipcode", function(value, element) {
  return this.optional(element) || /^\d{5}(?:-\d{4})?$/.test(value);
}, "Please provide a valid zipcode.");

_If you want to accept spaces¹ between zipcode, use /^\d{5}(?:[\s-]\d{4})?$/ for the pattern instead.

then specify it in your options:

rules: {
  ...
  'Address.PostalCode': {
    ...
    zipcode: true,
    ...
  },
  ...
}

Note that the extension library additional-methods.js has a zipcodeUS validator as well (but unless you're using any of the other ones it may not make sense to include it).

¹ According to the spec, properly formatted zip codes consist of five (5) numbers or five (5) numbers follower by a hyphen (-) and four (4) additional numbers. A space shouldn't technically be acceptable, but I'll provide the pattern regardless.

edited Sep 26, 2013 at 12:43

answered Sep 25, 2013 at 18:09

Brad Christie

102k16 gold badges161 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Blago Over a year ago

The regex doesn't handle the space format properly: 12345 6789

Brad Christie Over a year ago

@Blago: Updated answer to to accommodate.

Sparky · Accepted Answer · 2013-09-25 22:09:04Z

16

Simply include the additional-methods.js file and use the zipcodeUS rule.

$("#locationSetup").validate({
    rules: {
        // rules,
        'Address.PostalCode': {
            required: true,
            zipcodeUS: true // <-- use it like this
        }
    },
....

If you don't want to include the additional-methods.js file, you can copy the following method into your code...

jQuery.validator.addMethod("zipcodeUS", function(value, element) {
    return this.optional(element) || /\d{5}-\d{4}$|^\d{5}$/.test(value)
}, "The specified US ZIP Code is invalid");

answered Sep 25, 2013 at 22:09

Sparky

98.8k26 gold badges203 silver badges293 bronze badges

4 Comments

ehp Over a year ago

,if I try this it gives me error TypeError: jQuery.validator is undefined. Can you tell me what actually I am missing here.

Sparky Over a year ago

@ehp, The error is telling you that the validator is not defined. It simply means you did not properly include the jQuery Validation plugin.

Tim Ramsey Over a year ago

Just a note. If you do use the additional-methods.js make sure to get the version that corresponds with the version of the validation plugin you are using. The file here is 1.11.1 and the newest at this time as 1.12.0. The 1.11 was giving errors with 1.12.

Sparky Over a year ago

@TimRamsey, all that should really go without saying, since newer plugin versions will always be forthcoming. Anyway, the latest at the time this answer was written was 1.11.1 and I must have scores of answers linked to the latest at that time.

Blago · Accepted Answer · 2013-09-26 03:14:23Z

3

You can define a custom validator:

jQuery.validator.addMethod('zipcode', function(value, element) {
  return this.optional(element) || !!value.trim().match(/^\d{5}(?:[-\s]\d{4})?$/);
}, 'Invalid zip code');

Then use it like this

<input class="zipcode"/>

edited Sep 26, 2013 at 3:14

answered Sep 25, 2013 at 18:10

Blago

4,7772 gold badges37 silver badges29 bronze badges

Comments

Paul Smith · Accepted Answer · 2013-11-16 16:56:47Z

1

Zip code validation routines are provide in additional-methods.js but I would question why you ask for country information if you are going to invalidate the form for any country other than the US? Please remember that only about 5% of the worlds population uses a US zipcode. I would recommend you make you postcode validation routines dependent on the country actually selected by the user.

answered Nov 16, 2013 at 16:56

Paul Smith

4766 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to validate US ZIP code using jQuery Validation plugin

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Collectives™ on Stack Overflow

How to validate US ZIP code using jQuery Validation plugin

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related