| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Work with all your cloud files (Drive, Dropbox, and Slack and Gmail attachments) and documents (Google Docs, Sheets, and Notion) in one place. Try Dokkio (from the makers of PBworks) for free. Now available on the web, Mac, Windows, and as a Chrome extension!

View
 

Lecture - Form Validation in Javascript

Page history last edited by Dr. Ron Eaglin 7 years, 1 month ago

 

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

Comments (0)

You don't have permission to comment on this page.