Zip Code Validation Needs to Support 5 Digits - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: custom rule, jqxmaskedinput, jqxvalidator, maskedinput, rule, validator, zipCode

This topic contains 6 replies, has 3 voices, and was last updated by jcwren 9 years, 4 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Zip Code Validation Needs to Support 5 Digits Posts
March 11, 2015 at 5:24 pm Zip Code Validation Needs to Support 5 Digits #68373

David
Participant

The current validation rule for zipCode needs to support the following formats (5 digit and 9 digit):

12345
12345-6789

Also, the documentation for the zipCode rule says, “‘zipCode’ – requires a valid zip code like: ___-__-____”. The masked input shown is not a valid zip code mask.

March 12, 2015 at 8:47 am Zip Code Validation Needs to Support 5 Digits #68404
Nadezhda
Participant
Hello David,

If you want to validate Zip Code field you can set the masked input’s mask like the following: mask: "#####" for 5 digits or mask: "#####-####" for 9 digits. The rule property is defining the way you want to validate the input. When your mask is set to 5 digits the ‘zipCode’ rule will requires a valid zip code like: _____.

Here is an example for 9 digits:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxmaskedinput.js"></script>
    <style type="text/css">
        .register-table {
            margin-top: 10px;
            margin-bottom: 10px;
        }
            .register-table td,
            .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
            }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#zipInput").jqxMaskedInput({ mask: "#####-####", width: 150, height: 22 });
            $('#testForm').jqxValidator({
                rules: [
                    {
                        input: '#zipInput', message: 'Invalid zip code!', action: 'valuechanged, blur', rule: 'zipCode' }
                ], theme: 'summer'
            });
        });
    </script>
</head>
<body>
    <form id="testForm" action="./">
        <table class="register-table">
            <tr>
                <td>Zip code:</td>
                <td>
                    <div id="zipInput"></div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
```
Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/
March 12, 2015 at 3:45 pm Zip Code Validation Needs to Support 5 Digits #68430

David
Participant

Nadezhda,

I know that I could do a 5-digit or 9-digit mask and validation. The issue I am reporting is that the zipCode rule, and as I also just found out, and the required rule do not function properly for the above example. When the rule is zipCode it needs to validate for BOTH a 5-digit or a 9-digit entry. These are considered valid zip codes and our users will need to be able to enter either. There is a proper RegEx method in JavaScript for handling this which I am using as a custom validation:

$(“#Zip”).jqxMaskedInput({ width: ‘100px’, mask: ‘#####-####’, promptChar: ” ” });

$(‘#myform).jqxValidator({
rules: [
{ input: ‘#Zip’, message: ‘Zip Code is Required’, rule: ‘required’ },
{
input: ‘#Zip’, message: ‘Invalid Zip Code Format (##### or #####-####)’, rule: function () {
var zipcode = /^\d{5}$|^\d{5}-$|^\d{5}-\d{4}$/;
var pattern = new RegExp(zipcode);
return pattern.test($(‘#Zip’).val());
}
}
]
});

In the above example the input is validated correctly for the format but the required validation is failing for some reason. I am guessing it is because I did not fill in all 9 values of the Masked Input control. If that is the case I will need to write a custom validation for required as well. I would suggest changing how the zipCode rule works to support 5-digit (#####), 5-digit of 9 (#####- ), or the full 9-digit (#####-####).

Thanks

March 13, 2015 at 8:20 am Zip Code Validation Needs to Support 5 Digits #68458
Nadezhda
Participant
Hi David,

The ‘zipCode’ rule supports only one type of mask. If you want to validate one input field with three different masks you should use custom rule. Here is an example with custom rule:
```
$('#testForm').jqxValidator({
    rules: [
        {
            input: '#zipInput', message: 'Invalid zip code!', action: 'valuechanged, blur', rule: function (input, commit) {
                var zip = $('#zipInput').jqxMaskedInput('val');
                var cnt = zip.replace(/[^0-9]/g, "").length;
                if (cnt >= 5 && cnt <= 9) {

                    return true;
                }
                return false;
            }
        }
    ], theme: 'summer'
});
```
Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/
March 17, 2015 at 12:52 pm Zip Code Validation Needs to Support 5 Digits #68726

David
Participant

Nadezhda,

I did use a custom one. This is a suggestion to improve the zipCode rule not a question. It would be nice if the rule would perform the proper zip code regex validation for both 5 and 9 digits without having to customize the rule.

March 17, 2015 at 1:32 pm Zip Code Validation Needs to Support 5 Digits #68735

Nadezhda
Participant

Hi David,

Thank you for your suggestion.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

May 12, 2015 at 3:02 pm Zip Code Validation Needs to Support 5 Digits #71016

jcwren
Participant

FWIW, 3.8.0 seems to support 5 and 9 digit US ZIP Codes(tm), along with whoever uses 3-2-4 formatted codes.

/^(^\d{5}$)|(^\d{5}-\d{4}$)|(\d{3}-\d{2}-\d{4})$/
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.