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


Lecture - Form Validation in Javascript

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


Form Validation in Javascript




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







Reference Materials


<!DOCTYPE html>
    <title>HTML 5 Form</title>
    <link rel="stylesheet" type="text/css" href="/styles.css">
 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;     
<form name="myForm" onsubmit="return validateForm()" action="HTMLForm.html" >
<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/>
<input type="submit" value="Submit" />



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.