If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.
Whenever you search in PBworks or on the Web, Dokkio Sidebar (from the makers of PBworks) will run the same search in your Drive, Dropbox, OneDrive, Gmail, Slack, and browsed web pages. Now you can find what you're looking for wherever it lives. Try Dokkio Sidebar for free.

Lecture - Form Validation in Javascript

Page history last edited by Dr. Ron Eaglin 8 years, 6 months ago

Form Validation in Javascript

Topics covered:

1. Creating forms using Javascript

2. Form validation using Javascript

3. How HTML5 acts with certain browsers

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

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