javascript - simple form validation not working -
trying loop through fields, , have errors written above form, autofocus, , background color changed red ...
form doesn't work.
why?
bonus points: appreciate if explain how name fields individually in errormessages ...
code:
<html> <head> <meta charset="utf-8" /> <title></title> <script> function validateme(){ document.getelementbyid("button1").addeventlistener("click",validateform); function validateform(){ //alert("wheeeeee!"); var formy = document.getelementbyid("testy"); (var = 0; < formy.length; i++) { if (formy[i].value == "") { document.getelementbyid("errormessages").innerhtml = "please don't leave blank" document.form["testy"].focus(); formy[i].style.backgroundcolor = "red"; return false; } else { formy[i].style.backgroundcolor = "#fff" } return true; } } } window.addeventlistener("load",validateme); </script> </head> <body> <form name="" id="testy" action="" onsubmit="return validateme"> <p id="errormessages"></p> first name: <input type="input" name="first_name" id="first_name" /> <br /><br /> last name: <input type="input" name="last_name" id="last_name" /> <br /><br /> email address: <input type="input" name="email" id="email" /> <br /><br /> <input type="submit" value="validate" id="button1" /> </form> </body> </html> edit
avoiding jquery , html5 attributes validation since i'm trying learn nitty gritty of js.
here code javascript validation. point out few things. first added return in loop check first element. because either condition true or false stops execution of it's next iteration , returned back. can use array adding error messages different elements.
<html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <form name="" id="testy" action="" > <p id="errormessages"></p> first name: <input class='form-item' type="input" name="first_name" id="first_name" /> <br /><br /> last name: <input class='form-item' type="input" name="last_name" id="last_name" /> <br /><br /> email address: <input class='form-item' type="input" name="email" id="email" /> <br /><br /> <input type="submit" value="validate" id="button1" /> </form> <script> var form = document.getelementbyid("testy"); form.addeventlistener("submit", function (e) { e.preventdefault(); var error = []; (var = 0; < form.length; i++) { if (form[i].value == "") { //document.getelementbyid("errormessages").innerhtml += "please don't leave blank<br/>"; error.push("please don't leave "+form[i].name+" blank<br/>"); form[i].focus(); form[i].style.backgroundcolor = "red"; } else { form[i].style.backgroundcolor = "#fff" } } if(error.length){ document.getelementbyid("errormessages").innerhtml = "<ul>"; for(var i=0; i<error.length;i++){ document.getelementbyid("errormessages").innerhtml += "<li>"+error[i]+"</li>"; } document.getelementbyid("errormessages").innerhtml += "</ul>"; }else{ form.submit(); } }); var obj = document.getelementsbyclassname("form-item"); (var = 0; < obj.length; ++i) { var item = obj[i]; item.onfocus = function(){ this.style.backgroundcolor = "#fff"; } } </script> </body> </html> 
Comments
Post a Comment