Uncategorized

Understanding Validation

Forms have become an essential part of web application. It is used to gather user information such as name, email, age, address and so on. To provide users with quick feedback, you can use javascript to validate data. This is called client-side validation.

If client-side validation is not carried out, it may cause a bad user experience. Users may feel a noticeable delay because form data needs to transfer back and forth between the web browser and server. So it is crucial to validate the form data before sending it to the server-side.

Form validation test for the accuracy of the user information before submitting the form. Javascript provides faster client-side form validation than the server-side validation does.

Simple HTML code

  <html>   
   <head>
      <title>Form Validation</title>      
      <script type = "text/javascript">
         <!--
            // Form validation code will come here.
         //-->
      </script>      
   </head>
   
   <body>
      <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
         <table cellspacing = "2" cellpadding = "2" border = "1">
            
            <tr>
               <td align = "right">Name</td>
               <td><input type = "text" name = "Name" /></td>
            </tr>
            
            <tr>
               <td align = "right">EMail</td>
               <td><input type = "text" name = "EMail" /></td>
            </tr>
            
            <tr>
               <td align = "right">Zip Code</td>
               <td><input type = "text" name = "Zip" /></td>
            </tr>
            
            <tr>
               <td align = "right">Country</td>
               <td>
                  <select name = "Country">
                     <option value = "-1" selected>[choose yours]</option>
                     <option value = "1">USA</option>
                     <option value = "2">UK</option>
                     <option value = "3">INDIA</option>
                  </select>
               </td>
            </tr>
            
            <tr>
               <td align = "right"></td>
               <td><input type = "submit" value = "Submit" /></td>
            </tr>
            
         </table>
      </form>      
   </body>
</html>

The script section

   <script type = "text/javascript">
   <!--
      // Form validation code will come here.
      function validate() {
      
         if( document.myForm.Name.value == "" ) {
            alert( "Please provide your name!" );
            document.myForm.Name.focus() ;
            return false;
         }
         if( document.myForm.EMail.value == "" ) {
            alert( "Please provide your Email!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
            document.myForm.Zip.value.length != 5 ) {
            
            alert( "Please provide a zip in the format #####." );
            document.myForm.Zip.focus() ;
            return false;
         }
         if( document.myForm.Country.value == "-1" ) {
            alert( "Please provide your country!" );
            return false;
         }
         return( true );
      }
   //-->
</script>

Form validation with HTML5

Using html5, there are built-in features for form validation, thir attributes come with html5.

Form validation attributes

Required

 The required attribute checks if the input value is entered by the user. This attribute can be used on search, month, number, password, date, radio, time, text, and also on elements such as select and textarea.

Pattern

 The pattern arrtibute is available for input elements with type text, url, tel, email and password. It allows us set a regular expression as the value and the browser will validate it.

Autofocus

 The autofocus attribute focus on that single particular form control on page load. This attribute can be used only once in a single webpage.

Placeholder

 This attribute shows some hint in input control. Placeholder value will disappear on focus or keypress. Supported controls for placeholders are input control and textarea.

Readonly

 A control with readonly attribute is not editable 

By the user.

Min and Max

 The min and max attribute allows you to define a valid range of valid entries to the following tag types: number, date, range, time, week.

Step

    The step attribute checks if the input is an integer.

What's your reaction?

Excited
0
Happy
0
In Love
0
Not Sure
0
Silly
0

Leave a reply

Your email address will not be published. Required fields are marked *

Next Article:

0 %