jQuery Validation plugin rules formatting

Hi experts,

I'm using the jQuery Validation Plugin http://jqueryvalidation.org

Example 1

I have an example called Example 1.html this is the code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Makes "field" required and digits only.</title>
    <link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css" />
    <style type="text/css">
    </style>
    <script type="text/javascript">        
    </script>
</head>
<body>
    <form id="myform">
        <label for="field">Required, digits: </label>
        <input class="left" id="field" name="field" maxlength="9"/>
        <br />
        <input type="submit" value="Validate!" />
    </form>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
    <script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
    <script>
        // just for the demos, avoids form submit
        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        });
        // apply these validation rules to the form with an id of myfoorm
        $("#myform").validate({
            rules: {
                // rules for the textbox with a name of field
                field: {
                    // this field is required
                    required: true,
                    // must be digits only
                    digits: true,
                    // must be at least 9 digits to be valid
                    minlength: 9,
                    // must be positive digits only
                    min: 1,
                }
            }
        });
    </script>

</body>
</html>

Open in new window


On Example 1 I have a textbox where I'm applying 4 validation rules to.
These are the four rules I'm applying to it.

                    // this field is required
                    required: true,
                    // must be digits only
                    digits: true,
                    // must be at least 9 digits to be valid
                    minlength: 9,
                    // must be positive digits only
                    min: 1,

So when I run example 1

If I don't type anything I get this message:

example 1 validation rule 1
If I type in letters I get this:

example 1 validation rule 2
If I type in less than 9 digits I get this:

example 1 validation rule 3
If I type in all zero digits I get this:

example 1 validation rule 4
When I type in 9 digits validation passes:

example 1 when I type in nine digits and validation passes
So Example 1 works just fine. It works just like I need it to.

My question is on example 2.

Example 2

Example 2 is identical to example 1 except I'm going to apply a social security format mask to it using the jQuery Masked Input Plugin http://digitalbush.com/projects/masked-input-plugin/.

This is the code for Example2.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Makes "field" required and digits only.</title>
    <link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css" />
    <style type="text/css">
    </style>
    <script type="text/javascript">        
    </script>
</head>
<body>
    <form id="myform">
        <label for="field">Required, digits: </label>
        <input class="left" id="field" name="field" maxlength="9" />
        <br />
        <input type="submit" value="Validate!" />
    </form>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
    <script src="https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.0/dist/jquery.maskedinput.min.js"></script>    
    <script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            //-------------------------

            // just for the demos, avoids form submit
            jQuery.validator.setDefaults({
                debug: true,
                success: "valid"
            });
            // apply these validation rules to the form with an id of myfoorm
            $("#myform").validate({
                rules: {
                    // rules for the textbox with a name of field
                    field: {
                        // this field is required
                        required: true,
                        // must be digits only
                        digits: true,
                        // must be at least 9 digits to be valid
                        minlength: 9,
                        // must be positive digits only
                        min: 1,
                    }
                }
            });

            // apply mask to the textbox with a class called left
            $(".left").mask("999-99-9999");

            //-------------------------
        }); // end ready


    </script>

</body>
</html>

Open in new window


When I run example 2 I get this showing the masking applied to it.

example 2 with masking applied to it.
If I type 9 digits in my textbox I get this:

example 2 when I type 9 digitis
So it seems the validation thinks the dashes from the masking are characters that I why it's giving the don't enter more than 9 characters message.  
After I entered my 9 digits it is counting the two dashes, so then it thinks there are actually 11 characters that's why validation doesn't pass.

Anyone know how I fix my example 2 so the validation does not count the masking dashes as characters?
Example 2 should work just like example 1 except with the masking in the textbox.

So then if I type in something like this 123-45-6789 then validation passes.
The validation should only count the digits I type in, not the dashes from the masking.
LVL 1
maqskywalkerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
>> So it seems the validation thinks the dashes from the masking are characters that I why it's giving the don't enter more than 9 characters message.  
Correct.  In your case, add a method to the SSN validation.  There's one already here:
https://gist.github.com/ataylorme/4558871

then, in the "rules", you "bind" the field to your custom function.  Here's a really good example:
http://code.runnable.com/UkmFFWPTV7wtAAki/how-to-use-jquery-validation-advanced-rules

The markup you are interested in is the following <input>:
<div class="form-group">
                <label for="example3-input1">Input 1 - Validate against a custom function</label>
                <input type="text" class="form-control" id="example3-input1" name="example3-input1">
</div>

// in the rules section you see how it is bound to the custom method:
...
"example3-input1" : "customFunction",
...

and at the end you see the method definition:
$.validator.addMethod("customFunction", function(value) {
                    return value == "input";
                }, 'Please enter "input"!'); 

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Shinesh PremrajanEngineering ManagerCommented:
$.validator.addMethod('SSNCheck', function (value) {
    return /^(\d{3}-\d{2}-\d{4})$/.test(value);
}, 'Please enter a valid SSN.');
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.