Using a Form for Client-Side Validation



<HTML>
    <HEAD>
    <TITLE> Form Validation Example </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function validatePersonalInfo(){
      var _first = document.info.fname.value;
      var _last = document.info.lname.value;
      var _street = document.info.street.value;
      var _city = document.info.city.value;
      var _zip = document.info.zip.value;
      var _phone = document.info.phone.value;
      var _email = document.info.email.value;

      if(_first.toString() == ""){alert("Please enter a first name.");}
      if(_last.toString() == ""){alert("Please enter a last name.");}
      if(_street.toString() == ""){alert("Please enter your street name.");}
      if(_city.toString() == ""){alert("Please enter your city.");}
      if(_zip.toString() == ""){alert("Please enter your zip.");}
      if(_phone.toString() == ""){alert("Please enter your phone number.");}
      if(_email.toString() == ""){alert("Please enter your email.");}
      

        var checkZip = checkNum(5);
        var phoneInput = document.info.phone.value;
        var validPhone = false;
        var validZip = false;
         if(checkZip == true){
            validZip = true;
         }
         else{
           alert("Invalid Zip Code" + validZip);
         }
         if(!checkPhone(phoneInput)){
               alert("Phone number is invalid." + validPhone);
            }
         else{
             validPhone = true;
         }
         if(validZip && validPhone){
            alert("Your form has been verified");
         }
    }
    
    // Strips hyphens out of phone number and verifies that
    // phone number is valid. Any phone number in the format
    // xxxxxxxxxx, xxx-xxx-xxxx, or (xxx)xxx-xxxx will be valid

    function checkPhone(str){
      var regexp = /^(d{10}|d{3}-d{3}-d{4}|(d{3})d{3}-d{4})$/;
       return regexp.test(str);
    }
    function checkNum(length){
      var zipEntry = document.info.zip.value;
      var zipNum = parseInt(zipEntry, 10);
      if (document.info.zip.value.length == length){
        if(zipNum != 0 && isNaN(zipNum) == false){
          return true;
        }
        else {
          return false;
        }
      }
      else {
        return false;
      }
    }
    // End hide-->
    </SCRIPT>
    </HEAD>
    <BODY>
    <P>
    <CENTER><B>Form Validation Example</B></CENTER>
    <B>Personal Information:</B>
    <FORM NAME="info"  ACTION="" METHOD="post">
    <TABLE>
    <TR><TD ALIGN="left">First Name:</TD>
    <TD ALIGN="left">
    <INPUT TYPE="text" NAME="fname" SIZE=15>
    Last Name:
    <INPUT TYPE="text" NAME="lname" SIZE=20>
    </TD>
    </TR>
    <BR>
    <TR><TD ALIGN="left">Street:</TD>
    <TD ALIGN="left">
    <INPUT TYPE="text" NAME="street" SIZE=30></TD>
    </TR>
    <BR>
    <TR>
    <TD ALIGN="left">City:</TD>
    <TD ALIGN="left">
    <INPUT TYPE="text" NAME="city" SIZE=15>
    State:
    <SELECT NAME="state">
    <OPTION value=AL>AL
    <OPTION value=AK>AK
    <OPTION value=AZ>AZ
    <OPTION value=AR>AR
    <OPTION value=CA>CA
    <OPTION value=CO>CO
    <OPTION value=CT>CT
    <OPTION value=DE>DE
    <OPTION value=FL>FL
    <OPTION value=GA>GA
    <OPTION value=HI>HI
    <OPTION value=ID>ID
    <OPTION value=IL>IL
    <OPTION value=IN>IN
    <OPTION value=IA>IA
    <OPTION value=KS>KS
    <OPTION value=KY>KY
    <OPTION value=LA>LA
    <OPTION value=ME>ME
    <OPTION value=MD>MD
    <OPTION value=MA>MA
    <OPTION value=MI>MI
    <OPTION value=MN>MN
    </SELECT>
    Zip:
    <INPUT TYPE="text" NAME="zip" SIZE=7>
    </TD>
    </TR>
    <BR>
    <TR><TD ALIGN="left">Phone (w/area code):</TD>
    <TD ALIGN="left">
    <INPUT TYPE="text" NAME="phone" SIZE=20></TD>
    </TR>
    <BR>
    <TR><TD ALIGN="left">Email:</TD>
    <TD ALIGN="left">
    <INPUT TYPE="text" NAME="email" SIZE=20></TD>
    </TR>
    <BR>
    </TABLE>
    <CENTER>
    <INPUT TYPE="button" VALUE="Submit" onclick="validatePersonalInfo()">
    </CENTER>
    </FORM>
    </BODY>
    </HTML>
Using a Form for Client-Side Validation : Form Validation : Form JAVASCRIPT TUTORIALS

JAVASCRIPT TUTORIALS » Form » Form Validation »

Using a Form for Client-Side Validation

JAVASCRIPT TUTORIALS
