html5 - How to validate with Javascript? -
thanks having work much, confused on javascript. have tried many things , have not gotten form validate once. have use plain javascript to:
**validate email - email must have @ , domain should yahoo.com
phone no.: must contain 10 digits
age: must positive number less 120
the validation should happen when user submits form. in case of above validation fails, corresponding fields should highlighted in red
if validation successful, page should redirect http://yahoo.com**
i'm not looking give me exact answer, push me in right direction, because have basic understanding of js.
<!doctype html> <div id="form"> <form name="myform" action="http://fsu.edu" onsubmit="return validateform()" method="post"> <head> <link rel="stylesheet" href="c:\users\neshia\desktop\cgs3066\form validation style sheet.css" type="text/css"> <script> function validatemyform() { var email = document.myform.email; var phone = document.myform.phonenumber; var age = document.myform.age; } { age = age.replace(/[^0-9]/g, ''); if(age.length != 10) { alert("not 10 digits"); } else { alert("yep, 10 digits"); } } </script> </head> <div id="header"> <hr id="hr1"> <h1> web programming: assignment 3 </h1> <p> form validation javascript </p> <hr id="hr2"> </div> <div id="input"> first name: <br> <input type="text" name="firstname"> <br> last name: <br> <input type="text" name="lastname"> <br> fsu email: <br> <input type= "text" name="email"> <br> phone no.: <br> <input type="numbers" name="phonenumber"> <br> age: <br> <input type="numbers" name="age"> </div> <hr id="hr3"> <br> <div id="sex"> sex: <br> <input type="radio" name="sex" value="male"> male <br> <input type="radio" name="sex" value="female"> female <br> <input type="radio" name="sex" value="other"> other </div> <hr id="hr32"> <div id="languages"> programming languages want learn: <br> <input type="checkbox" name="python" value="python"> python <br> <input type="checkbox" name="java" value="java"> javascript <br> <input type="checkbox" name="c++" value="c++"> c++ <br> <input type="checkbox" name="lisp" valie="lisp"> lisp </div> <hr id="hr32"> <div id="submit"> <input type="submit" value="submit"> </div> <hr id="hr12"> </form> </div>
you may intrigued note html5 validates of these forms not need use javascript.
you asked email, age , phone.
consider following examples::
<form> <input type="email" name="email" pattern=".*@yahoo\.com"> <br> <input type="number" min="18" max="120" name="age"> <br> <input type="tel" name="phonenumber"> <br> <input type='submit'> </form>if want fields required use
<form> <input type="email" name="email" pattern=".*@yahoo\.com" required> <br> <input type="number" min="18" max="120" name="age" required> <br> <input type="tel" name="phonenumber" required> <br> <input type='submit'> </form>see http://diveintohtml5.info/forms.html
in comments few days later, mentioned needing in javascript. think best way still using html5 , clever way if have use javascript might set input attributes through javascript. started on logic.
while not getting specific in code, commented things can general feel how can work data in javascript.
function validate(event){ // first stop form submitting until run code below event.stoppropagation(); // here going place reference objects want validate in array var references = ['email','age','phonenumber']; // going grab our list of inputs page var inputs = document.getelementsbytagname('input'); // run through loop specific elements for(i = 0; < inputs.length; i++){ /* line asks, 'name' of element inside our references array. works using indexof function built javascript. indexof provides index finds phrase looking for. in example, using see if index exists checking against negative 1 */ if(references.indexof(inputs[i].getattribute('name')) > -1){ // switch block lets present different outcome based on criteria being looked switch(inputs[i].getattribute('name')){ // in case see if email named element case 'email': // set attributes match our requirements email element , on through switch block age , phonennumber inputs[i].setattribute('type','email'); inputs[i].setattribute('pattern','.*@yahoo\.com'); break; case 'age': inputs[i].setattribute('type','number'); inputs[i].setattribute('min',18); inputs[i].setattribute('max',120); break; case 'phonenumber': inputs[i].setattribute('type','tel'); break; } // when done, set elements required inputs[i].setattribute('required',true); } } // submit form event.submit(); }<form> <input type="text" name="email"> <br> <input type="text" name="age"> <br> <input type="text" name="phonenumber"> <br> <input type='submit' onclick='validate(event)'> </form>
Comments
Post a Comment