Form validation: Not Empty, Valid Radio, is Number, string length, EMail Address : Validation « Form Control « JavaScript DHTML






Form validation: Not Empty, Valid Radio, is Number, string length, EMail Address

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O'Reilly & Associates
     Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Recipes 8.2, 8.3, and 8.4</title>
<style rel="stylesheet" id="mainStyle" type="text/css">
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
    margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}

</style>
<script type="text/javascript">
// validates that the field value string has one or more characters in it
function isNotEmpty(elem) {
  var str = elem.value;
    var re = /.+/;
    if(!str.match(re)) {
        alert("Please fill in the required field.");
        setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;
    } else {
        return true;
    }
}
//validates that the entry is a positive or negative number
function isNumber(elem) {
  var str = elem.value;
    var re = /^[-]?\d*\.?\d*$/;
    str = str.toString();
    if (!str.match(re)) {
        alert("Enter only numbers into the field.");
        setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;
    }
    return true;
}
// validates that the entry is 16 characters long
function isLen16(elem) {
  var str = elem.value;
    var re = /\b.{16}\b/;
    if (!str.match(re)) {
        alert("Entry does not contain the required 16 characters.");
        setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;
    } else {
        return true;
    }
}
// validates that the entry is formatted as an e-mail address
function isEMailAddr(elem) {
  var str = elem.value;
    var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
    if (!str.match(re)) {
        alert("Verify the e-mail address format.");
        setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;
    } else {
        return true;
    }
}
// validate that the user made a selection other than default
function isChosen(select) {
    if (select.selectedIndex == 0) {
        alert("Please make a choice from the list.");
        return false;
    } else {
        return true;
    }
}

// validate that the user has checked one of the radio buttons
function isValidRadio(radio) {
    var valid = false;
    for (var i = 0; i < radio.length; i++) {
        if (radio[i].checked) {
            return true;
        }
    }
    alert("Make a choice from the radio buttons.");
    return false;
}

function focusElement(formName, elemName) {
    var elem = document.forms[formName].elements[elemName];
    elem.focus();
    elem.select();
}

// batch validation router
function validateForm(form) {
    if (isNotEmpty(form.name1)) {
        if (isNotEmpty(form.name2)) {
            if (isNotEmpty(form.eMail)) {
                if (isEMailAddr(form.eMail)) {
                    if (isChosen(form.continent)) {
                        if (isValidRadio(form.accept)) {
                            return true;
                        }
                    }
                }
            }
        }
    }
    return false;
}
</script>
</head>
<body>
<h1>Form Validations</h1>
<hr /> 
<form method="GET" action="cgi-bin/register.pl" name="sampleForm" 
      onsubmit="return validateForm(this)">
        First Name: 
        <input type="text" size="30" name="name1" id="name1" onchange="isNotEmpty(this)" />
        <br>
        Last Name: 
        <input type="text" size="30" name="name2" id="name2" onchange="isNotEmpty(this)" />
        <br>
        E-mail Address: 
        <input type="text" size="30" name="eMail" id="eMail" onchange="if (isNotEmpty(this)) {isEMailAddr(this)}" />
        <br>
        Your Region: 
        <select name="continent" id="continent">
            <option value="" selected>Choose One:</option>
            <option value="Africa">Africa</option>
            <option value="Asia">Asia</option>
            <option value="Australia">Australia/Pacific</option>
            <option value="Europe">Europe</option>
            <option value="North America">North America</option>
            <option value="South America">South America</option>
        </select>
        <br>
        Licensing Terms: 
        <input type="radio" name="accept" id="accept1" value="agree" />I agree
        <input type="radio" name="accept" id="accept2" value="refuse" />I do not agree
        <br>
        <input type="reset" /> <input type="submit" />
</form>
</body>
</html>


           
       








Related examples in the same category

1.Validate an input field with minimum and maximum values
2.Validate an field with a maximum number of characters
3.Phone Number Validation
4.Creating Reusable Validation Code
5.Credit Card Validation
6.Money Format
7.Validating User Input
8.Validate email address
9.Validate a number
10.TextField input length validator
11.Password field validator
12.TextField validator: email, IP address and URL
13.Must be at least 3 characters and not more than 8
14.Only characters are allowed
15.Can be empty
16.Must be a valid email address
17.ComboBox(list box): Must be selected one
18.InputBox: value must be between 10 and 90
19.Not stop when the first failed validation is encountered
20.A CSS is used to highlight the fields which failed to validate
21.Need to select a file
22.A simple form with two passwords that must have the same value
23.Shows the usage of callback functions for checking a field
24.Javascript validation framework
25.Form validator library