Lecture - Form Validation in Javascript


 

Form Validation in Javascript

 

Prerequisites

 

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

 

Summary

 

Topics covered:

1. Creating forms using Javascript

2. Form validation using Javascript

3. How HTML5 acts with certain browsers

 

Video 

 

 

http://online1.daytonastate.edu/player2.php?id=c3008b2c6f5370b744850a98a95b73ad 

 

Reference Materials

 

<!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> 

 

 

Additional Information

 

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 

 

 

COP 4813 Lectures