Form Validation

Today we are going to discuss about form validation. Now a days people are expecting powerful validation with simple code, so HTML5 is there, in html5 we have to just put required to make validation, as similar like that, we are going to see about form validation using validate js. by using that validate js we are going to do validation very simple. as well as Javascript validation its will take too much of code so that we have to overcome that by jquery validation . just include the jquery validation file to make form validation. let see the coding.

HTML
<html>
    <head>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
    <script type="text/javascript">
      $('#user_form').validate();
    </script>
    </head>
    <body>
        <form  id="user_form" method="post">
        <p>
            <input type="text" title="Please Enter your name" class="required" name="firstname" />
        </p>
        <p>
            <input type="text" class="required" name="lastname" />
        </p>
        <p>
            <input type="email" class="required" name="email" />
        </p>    
        <p>
            <input type="submit" name="send" value="Submit your Request">
        </p>
        </form>
    </body>
</html>

Required field validation
just call class is required in your input field and enter title message.
<input type="text" title="Please Enter your name" class="required" name="firstname" />

Email field validation 
<input type="email" class="required email" name="email" />

Number field validation 
<input type="text" class="required number" name="phone" />

Url validation 
<input type="text" class="required url" value="http://" name="url" />

Password confirm validation 
<input type="password" id="password" class="required" name="password" />
<input type="text" equalto="#password" class="required" name="password1" />

Minimum and maximum 
<input type="text" min="10" class="required number" name="age" />
<input type="text" max="60" class="required number" name="age" />

Other form fields
<input type="checkbox" class="required" name="agree" /> agree
<input type="radio" class="required" name="yes" /> yes
<select class="required"></select>
<textarea class="required"></textarea>

0 comments:

Post a Comment

Subscribe to: Posts (Atom)