JavaScript Form Validation on submit -

JavaScript Form Validation on submit -

i have simple form , validating onchange , need final validation onsubmit. displaying message right of inputbox on error. i'm trying maintain @ dom 1 compatible.

html

<form id = "myform" action = "" onsubmit = "return validateform(this);"> <table class = "table-submit" border = "0"> <tr> <td> username: </td> <td> <input type = "text" id = "username" size = "30" maxlength = "30" onchange = "validateusername(this, 'msgusername')" /> </td> <td id = "msgusername"> &nbsp; </td> </tr> <tr> <td> password: </td> <td> <input type = "password" id = "password" size = "30" maxlength = "30" onchange = "validatepassword(this, 'msgpassword')" /> </td> <td id = "msgpassword"> &nbsp; </td> </tr> <tr> <td>&nbsp;</td> <td> &nbsp; <input type = "submit" value = "submit" /> &nbsp; <input type = "reset" value = "clear" /> </td> </tr> </table> </form>

javascript

function validateusername(myitem, myelement) { var dom = document.getelementbyid(myelement); if (myitem.value.length < 3) { dom.innerhtml = " username needs minimum of 3 characters! "; homecoming false; } else { dom.innerhtml = ""; homecoming true; } } function validatepassword(myitem, myelement) { var dom = document.getelementbyid(myelement); if (myitem.value.length < 5) { dom.innerhtml = " password needs minimum of 5 characters! "; homecoming false; } else { dom.innerhtml = ""; homecoming true; } } function validateform (itm) { // kind of stuck here... }

as may of noticed, bit stuck on validateform() function. code validates on each inputbox onchange event. not sure best way go here. thought doing if both single input box validation, need send each parameters trying avoid using this. suggestions.

separate concerns. instead of having validate functions not validate study painting self corner. instead have validate function returns true/false , onchange event handler calls validate function , displays error message if needed. onsubmit handler can phone call validation functions in if/else block allow or cancel submit action.

function validateusername(username) { homecoming username.length >= 3; } function validatepassword(password) { homecoming password.length >= 5; } function showerrorfn(divid, message) { var div = document.getelementbyid(divid); message = " " + message; homecoming function(message) { div.innerhtml = message; }; } function makechangehandler(myitem, validationfn, errorfn) { homecoming function(e) { if (validationfn(myitem.value)) { homecoming true; } else { errorfn(); homecoming false; } }; } function makesubmithandler(usernameel, passwordel) { homecoming function(e) { if (validateusername(usernameel.value) && validatepassword(passwordel.value)) { homecoming true; } else { e.preventdefault(); homecoming false; } } var usernameel = document.getelementbyid("username"); var usernameerrorel = document.getelementbyid("msgusername"); usernameel.addeventlistener("change", makechangehandler( usernameel, validateusername, showerrorfn("username must more 3 characters") ); var usernameel = document.getelementbyid("password"); var usernameerrorel = document.getelementbyid("msgpassword"); usernameel.addeventlistener("change", makechangehandler( usernameel, validatepassword, showerrorfn("password must more 5 characters") ); var formel = document.getelementbyid("myform"); formel.addeventlistener("submit", makesubmithandler(usernameel, password));

javascript