Lecture - The Document Object Model and the basic Javascript lectures Lecture - Basics - Javascript variables and scope and Lecture - Basics - Javascript Arrays
Other lectures on Form Validation at Lecture - Debugging Form Validation in Javascript and Lecture - Basics - Functions and Form Validation
Topics covered:
1. Creating forms using Javascript
2. Form validation using Javascript
3. How HTML5 acts with certain browsers
http://online1.daytonastate.edu/player2.php?id=c3008b2c6f5370b744850a98a95b73ad
<!DOCTYPE html> <html> <head> <title>HTML 5 Form</title> <link rel="stylesheet" type="text/css" href="/styles.css"> <script> function validateForm() { var fname = document.forms["myForm"]["name"].value; return validateNotBlank(fname, "Name"); } function validateNotBlank(value, label) { if (value==null || value=="") { alert("Please enter a value for " + label); return false; } return true; } </script> </head> <body> <form name="myForm" onsubmit="return validateForm()" action="HTMLForm.html" > <p> <label>Enter Name (Javascript): <input type="text" name="name"></label><br/> <label>Color(HTML5): <input type="color" /></label><br/> <label>Date HTML5): <input type="date" /></label><br/> <label>E-Mail(HTML5): <input type="email" placeholder="name@domain.com" /></label><br/> <label>Number(HTML5): <input type="number" min="0" max="10" /></label><br/> <label>Range(HTML5): <input type="range" min="0" max="10" value="5" /></label><br/> </p> <input type="submit" value="Submit" /> </form> </body> </html> |
w3schools on using Javascript for form validation - http://www.w3schools.com/js/js_form_validation.asp
A nice validation library with source code - http://rickharrison.github.com/validate.js/
This article has everything on HTML 5 for forms validation - http://diveintohtml5.info/forms.html