javascript - JS Form Validation: adding a red border on input fields with errors; removing it on focus? -
javascript - JS Form Validation: adding a red border on input fields with errors; removing it on focus? -
i'm trying set form validation website. want accomplish is:
when js detects empty field, puts reddish border around it; , later, when user focuses (puts cursor in input field) border removed , not return. tried doing css because may have been shorter way, reddish border returns 1 time user removes input field out of focus.
it seems problem function parameter. js unable utilize parameter (fieldname
) if in middle of method? (document.contactform.
fieldname
.style.border="none !important";
)
here link illustration of problem on jsfiddle: http://jsfiddle.net/sonbrl2r/
the first function called upon form submission. if detects empty form puts reddish border around text field;
the sec function meant remove said border upon focus of text field.
html:
<body> <form name="contactform" onsubmit="return formvalidate();"> <table> <tr> <td><label>your name:</label></td> <td><input type="text" name="realname" size="44" maxlength="60" onfocus="removeborder(realname);"/></td> </tr> <tr> <td></td> <td><input type="submit" value="send" /></td> </tr> </table> </form> </body>
js:
var formvalidate = function() { var formvalid = true; var errormsg = "oops! looks didn't finish form properly: \n"; if (document.contactform.realname.value == "") { document.contactform.realname.style.border="2px solid #cc3333"; errormsg+="the name field empty.\n"; var formvalid = false; if(!formvalid) {alert(errormsg)}; homecoming formvalid; }; var removeborder = function(fieldname) { document.contactform.fieldname.style.border="none !important"; };
your question not clear me but, since fieldname
variable this:
document.contactform.fieldname.style.border
should written this:
document.contactform[fieldname].style.border
javascript html forms validation
Comments
Post a Comment