Form validation : Validation : Form Control JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Form Control » Validation »

 

Form validation



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


           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Form Control
» Validation