javascript - How to validate multiple fields at the same time using JQuery -
i have created form validates using jquery , javascript. problem is, validates 1 field @ time. user has correct first field first , press submit again see if next field valid.
what to do, have jquery validate whole form after pressing submit , show applicable error messages.
here js:
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() { 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; } and here submit form code:
$('#your-form').submit(validateform);
instead of returning true or false return string containing error , empty string if no error found.
then validateform
function validateform() { error = ""; //call username function error += "\n"+validateusername(); //call password function error += "\n"+validatepassword(); ... if(error === ""){ return true; } $("#errorlname").text(error); return false; }
Comments
Post a Comment