Form validation not working in jQuery

Question

This is jQuery form validation (html, css and jQuery) but the code isn't work all the if statement and the error message I can't fix it.

 $("#validationForm").submit(function(event) { var errorMessage = ""; event.preventDefault(); function isValidEmailAddress(emailAddress) { var pattern = new RegExp(/^((([az]|\\d| [!#\\$%&'\\*\\+\\-\\/=\\?\\^_`{\\|}~]|[\ -\퟿\豈-\﷏\ﷰ-\￯])+(\\.([az]|\\ d|[!#\\$%&'\\*\\+\\-\\/=\\?\\^_`{\\|}~]|[\ -\퟿\豈-\﷏\ﷰ-\￯]) +)*)|((\\x22)((((\\x20|\\x09)*(\\x0d\\x0a))?(\\x20|\\x09)+)?(([\\x01-\\x08\\x0b\\x0c\\x0e- \\x1f\\x7f]|\\x21|[\\x23-\\x5b]|[\\x5d-\\x7e]|[\ -\퟿\豈-\﷏\ﷰ- \￯])|(\\\\([\\x01-\\x09\\x0b\\x0c\\x0d-\\x7f]|[\ -\퟿\豈-\﷏\ﷰ- \￯]))))*(((\\x20|\\x09)*(\\x0d\\x0a))?(\\x20|\\x09)+)?(\\x22)))@((([az]|\\d| [\ -\퟿\豈-\﷏\ﷰ-\￯])|(([az]|\\d|[\ -\퟿\豈- \﷏\ﷰ-\￯])([az]|\\d|-|\\.|_|~|[\ -\퟿\豈-\﷏\ﷰ- \￯])*([az]|\\d|[\ -\퟿\豈-\﷏\ﷰ-\￯])))\\.)+(([az]| [\ -\퟿\豈-\﷏\ﷰ-\￯])|(([az]|[\ -\퟿\豈-\﷏ \ﷰ-\￯])([az]|\\d|-|\\.|_|~|[\ -\퟿\豈-\﷏\ﷰ- \￯])*([az]|[\ -\퟿\豈-\﷏\ﷰ-\￯])))\\.?$/i); return pattern.test(emailAddress); }; if (!isValidEmailAddress($("#email").val())) { errorMessage = "<br />Please enter a valid email address"; } if (!$.isNumeric($("#phone").val())) { errorMessage = errorMessage + "<br />Please enter a valid phone number"; } if ($("#pass1").val() != $("#pass2").val()) { errorMessage = errorMessage + "<br />Please enter matching passwords"; } if (errorMessage == "") { alert("Success!"); } else { $("#error").html(errorMessage); } });

 #wrapper { width: 600px; margin: 0 auto; font-family: helvetica; font-size: 1.2em; } input { width: 300px; height: 30px; padding: 5px; border-radius: 5px; font-size: 1.2em; border: 1px solid grey; margin-bottom: 10px; } label { width: 200px; float: left; padding-top: 7px; } #submitButton { height: 50px; margin-left: 200px; width: 100px; } #error { color: red; margin: 20px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="wrapper"> <div id="error"></div> <form id="validationForm"> <label for="email">Email</label> <input name="email" id="email" /> <label for="phone">Telephone</label> <input name="phone" id="phone" /> <label for="pass">Password</label> <input name="pass" type="password" id="pass1" /> <label for="pass">Confirm Password</label> <input name="pass" type="password" id="pass2" /> <input id="submitButton" type="submit" value="Submit" /> </form> </div> </body>

Answer 1

If it is HTML5, and you're expecting end-users' browsers to be supporting HTML5 engines, you can use appropriate type attributes for the input elements:

 $("#validationForm").on('submit', function(event) { var errorMessage = ""; event.preventDefault(); if (!$.isNumeric($("#phone").val())) { errorMessage = errorMessage + "<br />Please enter a valid phone number"; } if ($("#pass1").val() !== $("#pass2").val()) { errorMessage = errorMessage + "<br />Please enter matching passwords"; } if (errorMessage == "") alert("Success!"); else $("#error").html(errorMessage); });

 #wrapper { width: 600px; margin: 0 auto; font-family: helvetica; font-size: 1.2em; } input { width: 300px; height: 30px; padding: 5px; border-radius: 5px; font-size: 1.2em; border: 1px solid grey; margin-bottom: 10px; } label { width: 200px; float: left; padding-top: 7px; } #submitButton { height: 50px; margin-left: 200px; width: 100px; } #error { color: red; margin: 20px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="wrapper"> <div id="error"></div> <form id="validationForm"> <label for="email">Email</label> <input name="email" id="email" type='email' required /> <label for="phone">Telephone</label> <input name="phone" id="phone" type='tel' required /> <label for="pass">Password</label> <input name="pass" type="password" id="pass1" required /> <label for="pass">Confirm Password</label> <input name="pass" type="password" id="pass2" /> <input id="submitButton" type="submit" value="Submit" /> </form> </div> </body>

Please note, I've used type='email' and type='tel' accordingly. Also, I've put the fields to be required by default. This way, the browser itself will ask the user to not leave the fields blank.

Form validation not working in jQuery

Question

1 answers

solution1
0 2015-09-27 09:58:06

Form validation not working in jQuery

Question

1 answers

solution1 0 2015-09-27 09:58:06

solution1
0 2015-09-27 09:58:06