Search jQuery

jQuery Forum

regex expression isn't working in my page

in Using jQuery Plugins • 9 years ago

I'm experimenting with jQuery and jQuery validator. They're amazing, and I'm SO close to what I want the page to do.

This particular regex isn't working for the "work phone" field: ^\d{3}-\d{3}-\d{4}[\s\w]{0,13}

I want a phone number in the form NNN-NNN-NNNN and then the user can add an extension or some other text up to 13 characters long.

I've validated the regex in several validators; I can't figure out why it's not working here. The other regexes are working fine. I'd added this to the page to enable regexes:

 $.validator.addMethod("regex", function (value, element, regexp) { var re = new RegExp(regexp); return this.optional(element) || re.test(value); },"Please check your input." );

Here's the complete page so you can see everything in context. I'm working off local copies of jquery and the validator.

Thanks in advance for any assistance.

Chris

@{ string lastName; string firstName; string middleName; string workPhone; string homePhone; string mobilePhone; int category; string gender; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery validation in a Web Page 2.0 edited with WebMatrix</title> <script src="jquery-1.7.2.js"></script> <script src="~/scripts/jquery.validate.js"></script> <script> $.validator.setDefaults({ submitHandler: function () { alert("submitted!"); } }); $.validator.addMethod("regex", function (value, element, regexp) { var re = new RegExp(regexp); return this.optional(element) || re.test(value); },"Please check your input." ); $(document).ready(function () { $("#testform").validate({ rules: { lastName: { required: true, maxlength: 25, regex: "^[^;,&]*$" //no special characters }, firstName: { required: true, maxlength: 25, regex: "^[^;,&]*$" //no special characters }, middleName: { maxlength: 25, regex: "^[^;,&]*$" //no special characters }, workPhone: { required: true, maxlength: 25, regex: "^\d{3}-\d{3}-\d{4}[\s\w]{0,13}" //NNN-NNN-NNNN then up to 13 additional alphanumeric characters  }, gender: { required: true, minlength: 1, maxlength: 1, regex: "^(M|F)$" //M or F } }, //end of rules messages: { lastName: { required: "Required", maxlength: "No longer than 25 characters", regex: "No special characters (commas, semicolons, etc)" }, firstName: { required: "Required", maxlength: "No longer than 25 characters", regex: "No special characters (commas, semicolons, etc)" }, middleName: { maxlength: "No longer than 25 characters", regex: "No special characters (commas, semicolons, etc)" }, workPhone: { required: "Required", maxlength: "No longer than 25 characters", regex: "NNN-NNN-NNNN then you can add an extension" }, gender: { required: "Required", regex: "M or F" } } // end of messages }); //end of the form.validate function }); //end of the document.ready function </script> </head> <body> <h1>Testing jQuery validation in an ASP.NET Web Page 2.0 page, edited using WebMatrix</h1> <h2>Add a record to the personnelNotInDMHRSi table</h2> <form class="myForm" action="" method="post" name="TestForm" id="testform"> <fieldset> <legend>&nbsp; &nbsp;* Required field &nbsp; &nbsp; </legend> <p><label for="lastName">* Last Name:</label> <input type="text" name="lastName" placeholder="1-25 CHARACTERS" autofocus="true" /> </p> <p><label for="firstName">* First Name:</label> <input type="text" name="firstName" placeholder="1-25 CHARACTERS" /> </p> <p><label for="middleName">Middle Name:</label> <input type="text" name="middleName" placeholder="UP TO 25 CHARACTERS" /> </p> <p><label for="workPhone">* Work Phone:</label> <input type="text" name="workPhone" placeholder="NNN-NNN-NNNN" /> </p> <p><label for="gender">* Gender:</label> <input type="text" name="gender" placeholder="M or F" pattern="^(M|F)$"/> </p> <br> <p> <button class="submit" type="submit">Add New Record</button> <button class="reset" type="reset">Reset Form</button> </p> </fieldset> </form> <br> <br> <p>This page is very basic. I eschewed HTML5 except for placeholders (which don't work in IE9) and autofocus on the Last Name field, which may be moot since I want the first field in the form to be the default anyway.</p> <p>It's a CSHTML page, but the only Razor code is to insert the data into a SQL table once the form passes validation.</p> <p>There's not a style sheet attached to this page. Once I get the basic page working the way I want, I spin off a copy and start spiffing it up.</p> <p>I've pulled the actual submission code out of here until I solve the problem of why the work phone regex isn't working in this page. It passes all the regex validators I've tested it with.</p> </body> </html>

Replies(2)

jakecigar

Re: regex expression isn't working in my page

9 years ago

Did you know that "^\d{3}-\d{3}-\d{4}[\s\w]{0,13}" === "^d{3}-d{3}-d{4}[sw]{0,13}" ?

If you really want "^\d{3}-\d{3}-\d{4}[\s\w]{0,13}", you need to write "^\\d{3}=\\d{3}-\\d{4}[\\s\\w]{0,13}"

It’s called backslash escaping or double backslashing.

JΛ̊KE

christian..

Re: regex expression isn't working in my page

9 years ago

Thanks, that solved it!

I see the code I originally posted didn't format very well. Here's another attempt with the updated code:

@{
    string lastName;
    string firstName;
    string middleName;
    string workPhone;
    string homePhone;
    string mobilePhone;
    int category;
    string gender;    
 
 
}
 
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery validation in a Web Page 2.0 edited with WebMatrix</title>
        <script src="jquery-1.7.2.js"></script>
        <script src="~/scripts/jquery.validate.js"></script>
 
        <script>
            $.validator.setDefaults({
                submitHandler: function () { alert("submitted!"); }
            });
            $.validator.addMethod("regex",
                function (value, element, regexp) {
                    var re = new RegExp(regexp);
                    return this.optional(element) || re.test(value);
                },"Please check your input."
            );
            $(document).ready(function () {
                $("#testform").validate({
 
                    rules: {
                        lastName: {
                            required: true,
                            maxlength: 25,
                            regex: "^[^;,&]*$"  //no special characters
                        },
                        firstName: {
                            required: true,
                            maxlength: 25,
                            regex: "^[^;,&]*$"  //no special characters
                        },
                        middleName: {
                            maxlength: 25,
                            regex: "^[^;,&]*$"  //no special characters
                        },
                        workPhone: {
                            required: true,
                            maxlength: 25,
                            regex: "^\\d{3}-\\d{3}-\\d{4}[\\s\\w]{0,13}"  //NNN-NNN-NNNN then up to 13 additional alphanumeric characters                       
                        },
                        gender: {
                            required: true,
                            minlength: 1,
                            maxlength: 1,
                            regex: "^(M|F)$"  //M or F
                        }
                    }, //end of rules
                    messages: {
                        lastName: {
                            required: "Required",
                            maxlength: "No longer than 25 characters",
                            regex: "No special characters (commas, semicolons, etc)"
                        },
                        firstName:
                        {
                            required: "Required",
                            maxlength: "No longer than 25 characters",
                            regex: "No special characters (commas, semicolons, etc)"
                        },
                        middleName:
                        {
                            maxlength: "No longer than 25 characters",
                            regex: "No special characters (commas, semicolons, etc)"
                        },
                        workPhone:
                        {
                            required: "Required",
                            maxlength: "No longer than 25 characters",
                            regex: "NNN-NNN-NNNN then you can add an extension"
                        },
                        gender:
                        {
                            required: "Required",
                            regex: "M or F"
                        }
                    } // end of messages
                }); //end of the form.validate function
            }); //end of the document.ready function
        </script>
    </head>
    <body>
        <h1>Testing jQuery validation in an ASP.NET Web Page 2.0 page, edited using WebMatrix</h1>
        <h2>Add a record to the personnelNotInDMHRSi table</h2>
        <form class="myForm" action="" method="post" name="TestForm" id="testform">
            <fieldset>
                <legend>&nbsp; &nbsp;* Required field &nbsp; &nbsp; </legend>
                <p><label for="lastName">* Last Name:</label>
                    <input type="text" id="lastName" name="lastName" placeholder="1-25 CHARACTERS" autofocus="true" />
                </p>
                <p><label for="firstName">* First Name:</label>
                    <input type="text" id="firstName" name="firstName" placeholder="1-25 CHARACTERS" />
                </p>
                <p><label for="middleName">Middle Name:</label>
                    <input type="text" id="middleName" name="middleName" placeholder="UP TO 25 CHARACTERS" />
                </p>
                <p><label for="workPhone">* Work Phone:</label>
                    <input type="text" id="workPhone" name="workPhone" placeholder="NNN-NNN-NNNN" />
                </p>
                 <p><label for="gender">* Gender:</label>
                    <input type="text" id="gender" name="gender" placeholder="M or F" pattern="^(M|F)$"/>
                </p>
                <br>
                <p>
                    <button class="submit" type="submit">Add New Record</button>
                    <button class="reset" type="reset">Reset Form</button>
                </p>
            </fieldset>        
        </form>
        <br>
        <br>
        <p>This page is very basic.  I eschewed HTML5 except for placeholders (which don't work in IE9) and autofocus on the Last Name
        field, which may be moot since I want the first field in the form to be the default anyway.</p>
        <p>It's a CSHTML page, but the only Razor code is to insert the data into a SQL table once the form passes validation.</p>
        <p>There's not a style sheet attached to this page.  Once I get the basic page working the way I want, I spin off a copy and
        start spiffing it up.</p>
        <p>I've pulled the actual submission code out of here until I solve the problem of why the work phone regex isn't working in this
        page.  It passes all the regex validators I've tested it with.</p>
        
    </body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

regex expression isn't working in my page

Replies(2)

Re: regex expression isn't working in my page

Re: regex expression isn't working in my page

Statistics

Tags

Actions

Related Posts