Monthly Archive for setembre, 2007

Javascript forms validation

This verification method consists in a verification function whose default value is true unless one or more validations change his value.

This function is called from the onsubmit event of the form tag, so the form won't be submited unless all validations are “valid”. Look at this example.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Prova Formulari</title>
    <!-- 
       Here is the form validation library we use in the function above. 
    -->
    <script src="javascript/formularis.js" type="text/javascript"></script>
    <script type="text/javascript">
      //This function will be called all times that our form is submited.
      //Before any information is send this validations must pass. By
      //doing it this way we ensure that the form is allways validated,
      //nonetheless if you verify information in the server site it’s
      //better  though.
      function verify(){
        ret=true;
      
        //If textbox with id nom is empty, then label with id lnom will
        //be printed red. As you can see I use a naming convention
        //to ease the development. In other words if it’s not valid
        //ret=false and our form won’t be submit until all of them pass.          
        if(!valid("lnom",ple("nom")))
          ret=false;
          
        //This mail function validates format and emptiness          
        if(!valid("lmail",mail("mail")))
          ret=false;
        
        //That function validates that accept checkbox is marked          
        if(!valid("laccept",premut("accept")))
          ret=false;
        
        //In case of this field is optional, but we want ensure
        //it’s correct format("num" or “mail"). Last argument
        //are optional characters we want to include. For example “.-"          
        if(!valid("ltel",si_ple("tel","num","")))
          ret=false; 
                   
        //To validate numeric fields          
        if(!valid("lweight",num("weight",".,")))
          ret=false;  
                  
        //If we want our users to choose passwords with a minimum
        //size and ensure they’ve typed it well.          
        if(!multi_valid("lpassword","lrepassword",igual("password","repassword")))
          ret=false;
        else{
          if(!multi_valid("lpassword","lrepassword",mida("password",5)))
            ret=false;
        }
        
        //If we want to validate some option is chosen in a combo or a radio.
        //Default option must contain empty value in combo.          
        if(!valid("lcolors",valor_combo("colors")))
          ret=false;
        if(!valid("lanswer",valor_radio("answer")))
          ret=false;
        return ret;
      }
    </script>
  </head>
  <body>
    <!-- verify() function is called at onsubmit event here in the form. -->
    <form action="valida.php" onsubmit="return verify()" method="post">
      <!--
         Look! Each element we validate has a label tag asociated. Label id is
         named like the element with an "L" at the begining.
      -->
      <label id="lnom" for="nom">Name:
        <input type="text" id="nom" name="nom" />
      </label>
      <br />
      <label id="lmail" for="mail">E-mail:
        <input type="text" id="mail" name="mail" />
      </label>
      <br />
      <label id="laccept" for="accept">
        <input type="checkbox" id="accept" name="accept" />
        I have read, understood and I accept all terms
      </label>
      <br />
      <label id="ltel" for="tel">Telephone(optional):
        <input type="text" id="tel" name="tel" />
      </label>
      <br />
      <label id="lweight" for="weight">Weight:(optional)
        <input type="text" id="weight" name="weight" />
      </label>
      <br />
      <label id="lpassword" for="password">
        Password:
        <input type="password" id="password" name="password" />
      </label>
      <br />
      <label id="lrepassword" for="repassword">
        Retype:
        <input type="password" id="repassword" />
      </label>
      <br />
      <label id="lcolors" for="colors">
        Favourite color:
        <select id="colors" name="colors">
          <option value="">Choose a color</option>
          <option value="red">red</option>
          <option value="green">green</option>
          <option value="blue">blue</option>
        </select>
      </label>
      <br />
      <label id="lanswer" for="answer">
        Do you like cheese?
      </label>
      <input type="radio" value="yes" name="answer" id="answer" />yes
      <input type="radio" value="no" name="answer" id="answer"  />no
      <br />
      <input type="submit" value="Send" />
    </form>
  </body>
</html>  

Look this example in the following link: validation form example

Download source files from here.