regex expression isn't working in my page

regex expression isn't working in my page

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

  1. @{ 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>