Form Validation

Submitted by alpha_luna on Thursday, April 14, 2016 - 11:58.

Good Day!!!

Yesterday, in our previous tutorial we create File Size Validation. In this case, we are going to make a Form Validation. This is a contact form that we are going to validate and showing error alert using the tooltip. Validation Form HTML This source code contains the contact form field that we are going to validating using the used script.
  1. <div id="contact_ValidationForm" style="margin-left:405px; padding:40px; float:left;">
  2. <div id="mail-status"></div>
  3. <label style="padding-top:20px;">Name</label>
  4. <div>
  5. <input type="text" name="user_Name" id="user_Name" class="css_textBox" required="true">
  6. </div>
  7. <label>Email</label>
  8. <div>
  9. <input type="email" name="user_Email" id="user_Email" class="css_textBox" required="true">
  10. </div>
  11. <label>Subject</label>
  12. <div>
  13. <input type="text" name="subject" id="subject" class="css_textBox" required="true">
  14. </div>
  15. <label>Message</label>
  16. <div>
  17. <textarea name="message" id="message" class="css_textBox" cols="60" rows="6" required="true"></textarea>
  18. </div>
  19. <div>
  20. <button name="submit" class="btn_Submit" onClick="validateContact_Form();">Submit</button>
  21. </div>
  22. </div>
Script Validation This is the script that we are going to use to validate all required fields in the contact form.
  1. <script>
  2. function validateContact_Form() {
  3.         var valid = true;
  4.         $("#contact_ValidationForm input[required=true], #contact_ValidationForm textarea[required=true]").each(function(){
  5.                 $(this).removeClass('error_style');
  6.                 $(this).attr('title','');
  7.                 if(!$(this).val()){
  8.                         $(this).addClass('error_style');
  9.                         $(this).attr('title','This field is required');
  10.                         valid = false;
  11.                 }
  12.                 if($(this).attr("type")=="email" && !$(this).val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)){
  13.                         $(this).addClass('error_style');
  14.                         $(this).attr('title','Enter valid email');
  15.                         valid = false;
  16.                 }  
  17.         });
  18.         return valid;
  19. }
  20. </script>
Tooltip Script This script will run after validating the contact form and it will shows when we hover it to the highlighted fields.
  1. <script>
  2.   $(function() {
  3.     $( document ).tooltip({
  4.                 position: {my: "left top", at: "right top"},
  5.           items: "input[required=true], textarea[required=true]",
  6.       message: function() { return $(this).attr( "title" ); }
  7.     });
  8.   });
  9. </script>
Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Tags
Form Validation
Form validator
contact form
Contact Information

Add new comment

About text formats
  • 129 views