validation - Could someone explain these javascript codes for me? -
all codes form validation. don't understand general idea of javascript codes. explain general idea behind javascript code , explain function validform() , function validbasedonclass(thisclass)? thank much.
this html page contains form fields required filled out user before form can submitted.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>password check</title> <link type="text/css" rel="stylesheet" href="script03.css" /> <script type="text/javascript" src="script03.js"></script> </head> <body> <form action="#"> <p><label for="username">your name: <input type="text" size="30" id="username" class="reqd" /></label></p> <p><label for="passwd1">choose password: <input type="password" id="passwd1" class="reqd" /></label></p> <p><label for="passwd2">verify password: <input type="password" id="passwd2" class="reqd passwd1" /></label></p> <p><input type="submit" value="submit" /> <input type="reset" /></p> </form> </body> this css file sets style invalid form elements.
body { color: #000; background-color: #fff; } input.invalid { background-color: #ff9; border: 2px red inset; } label.invalid { color: #f00; font-weight: bold; } this javascript form checking.
window.onload = initforms; function initforms() { (var i=0; i< document.forms.length; i++) { document.forms[i].onsubmit = function() {return validform();} } } function validform() { var allgood = true; var alltags = document.getelementsbytagname("*"); (var i=0; i<alltags.length; i++) { if (!validtag(alltags[i])) { allgood = false; } } return allgood; function validtag(thistag) { var outclass = ""; var allclasses = thistag.classname.split(" "); (var j=0; j<allclasses.length; j++) { outclass += validbasedonclass(allclasses[j]) + " "; } thistag.classname = outclass; if (outclass.indexof("invalid") > -1) { thistag.focus(); if (thistag.nodename == "input") { thistag.select(); } return false; } return true; function validbasedonclass(thisclass) { var classback = ""; switch(thisclass) { case "": case "invalid": break; case "reqd": if (allgood && thistag.value == "") { classback = "invalid "; } classback += thisclass; break; default: classback += thisclass; } return classback; } } }
one section @ time:
window.onload = initforms; function initforms() { (var i=0; i< document.forms.length; i++) { document.forms[i].onsubmit = function() {return validform();} } } this sets form on page first call validform() before submit, if function returns false, form won't submitted.
function validform() { var allgood = true; var alltags = document.getelementsbytagname("*"); (var i=0; i<alltags.length; i++) { if (!validtag(alltags[i])) { allgood = false; } } return allgood; <...snip...> this section grabs elements, , starts looping through them, calling validtag function on each one, , passing function each tag object. if validtag returns false, variable allgood set false. once looping through of elements complete, returns allgood variable handler mentioned in previous section. if false, form doesn't submit.
function validtag(thistag) { var outclass = ""; var allclasses = thistag.classname.split(" "); (var j=0; j<allclasses.length; j++) { outclass += validbasedonclass(allclasses[j]) + " "; } thistag.classname = outclass; if (outclass.indexof("invalid") > -1) { thistag.focus(); if (thistag.nodename == "input") { thistag.select(); } return false; } return true; validtag function takes 1 parameter, html tag. looks @ class names applied tag , passes each of them function validbasedonclass. collects results of multiple validbasedonclass calls , puts them outclass variable. code checks if outclass variable contains word "invalid", if does, element given keyboard focus, , if element input type tag, text highlighted, , false returned, validform function above set allgood false , form won't submitted.
function validbasedonclass(thisclass) { var classback = ""; switch(thisclass) { case "": case "invalid": break; case "reqd": if (allgood && thistag.value == "") { classback = "invalid "; } classback += thisclass; break; default: classback += thisclass; } return classback; } } } the validbasedonclass function looks @ 1 class name @ time given tag, , if set 'reqd' makes sure element's value not blank, if is, returns both original class name, , class 'invalid' appended it. triggers above documented behavior in validtag function.
Comments
Post a Comment