How to get a form to not submit if there are any errors in Javascript -
i don't want form submit if there errors. still want user able click submit button check errors. @ moment submitting , telling user errors or made. showing error error report directly tied submit button. do?
here javascript:
function validateusername() { var u = document.forms["newuser"]["user"].value var ulength = u.length; var illegalchars = /\w/; // allow letters, numbers, , underscores if (u == null || u == "") { $("#erroruser").text("you left username field emptyyy"); return false; } else if (ulength <4 || ulength > 11) { $("#erroruser").text("the username must between 4 , 11 characters"); return false; } else if (illegalchars.test(u)) { $("#erroruser").text("the username contains illegal charectors men!"); return false; } else { return true; } } function validatepassword() { var p = document.forms["newuser"]["pwd"].value var cp = document.forms["newuser"]["confirmpwd"].value var plength = p.length; if (p == null || p == "") { $("#errorpassword1").text("you left password field empty"); return false; } else if (plength < 6 || plength > 20) { $("#errorpassword1").text("your password must between 6 , 20 characters in length"); return false; } else if (p != cp) { $("#errorpassword1").text("th passwords not match!"); return false; } else { return true; } } function validateemail() { var e = document.forms["newuser"]["email"].value var elength = e.length; var emailfilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ; var illegalchars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ; if (elength == "" || elength == null) { $("#erroremail").text("you left email field blank!"); return false; } else if (e.match(illegalchars)) { $("#erroremail").text("ilegal charectors detected exterminate"); return false; } else { return true; } } function validatefirstname() { var f = document.forms["newuser"]["fname"].value; var flength = f.length; var illegalchars = /\w/; if(flength > 20) { $("#errorfname").text("first name has max of 20 characters"); return false; } else if (illegalchars.test(f)) { $("#errorfname").text("numbers,letter , underscores in first name only"); return false; } else { return true; } } function validatelastname() { var l = document.forms["newuser"]["lname"].value; var llength = l.length; var illegalchars = /\w/; if(llength > 100) { $("#errorlname").text("last name has max of 100 characters"); return false; } else if (illegalchars.test(f)) { $("#errorlname").text("numbers,letter , underscores in last name only"); return false; } else { return true; } } function validateform() { //call username function validateusername(); //call password function validatepassword(); //call email function validateemail(); //call first name function validatefirstname(); //call first name function validatelastname(); //perform form input validation , submit data } and here html:
<table id = "signuptable"> <form name = "newuser" id = "your-form"> <tr> <td id = "erroruser"></td> <td class = "fieldname">username:</td> <td class = "textfield"><input type = "text" name = "user"/></td> </tr> <tr> <td></td> <td class = "information"><em>must 4-11 characters.<br/>only numbers, letters , underscores.</em></td> </tr> <tr> <td id = "erroremail"></td> <td class = "fieldname">email:</td> <td class = "textfield"><input type = "text" name = "email"/></td> <tr> <td></td> <td class = "information"><em>we need verify account.</em></td> </tr> <tr> <td id = "errorpassword1"></td> <td class = "fieldname">password:</td> <td class = "textfield"><input type = "password" name = "pwd"/></td> <tr> <td></td> <td class = "information"><em>6-20 characters</em></td> </tr> <tr> <td id = "errorpassword2"></td> <td class = "fieldname">confirm password:</td> <td class = "textfield"><input type = "password" name = "confirmpwd"/></td> <tr> <td></td> <td class = "information"><em>just in case didn't make mistakes!</em></td> </tr> <tr> <td id = "errorfname"></td> <td class = "fieldname">first name:</td> <td class = "textfield"><input type = "text" name = "fname"/></td> <tr> <td></td> <td class = "information"><em>optional</em></td> </tr> <tr> <td id = "errorlname"></td> <td class = "fieldname">lastname:</td> <td class = "textfield"><input type = "text" name = "lname"/></td> <tr> <td></td> <td class = "information"><em>(optional)</em></td> </tr> <tr> <td><input type = "submit" value = "submit"/></td> </tr> </form> </table> <script> $('#your-form').submit(validateform); </script>
function validateform() { var valid = true; //call username function valid = valid && validateusername(); //call password function valid = valid && validatepassword(); //call email function valid = valid && validateemail(); //call first name function valid = valid && validatefirstname(); //call first name function valid = valid && validatelastname(); return valid; } $('#your-form').submit(validateform); 
Comments
Post a Comment