Programming, WordPress

HTML 5 Form Validation for Contact Form 7 Form Inputs

By default, CF7 form offers ajax validation for form input fields.

We can instantly validate form entries by adding required attribute . For validating particular input field we can use the id of that input field and to validate all the input fields the common class ‘wpcf7-form-control’  is  useful.  With the help of  jQuery, we can add required attribute in the form input and remove the ‘novalidate’ attribute.

<script>
jQuery(document).ready(function(jQuery){
 /*
  * for validating particular field use id
 */

  jQuery("#firstName").prop('required',true);


 /*
  * for validating all the input field 
 */
  jQuery(".wpcf7-form-control").prop('required',true);

  jQuery(".wpcf7-form").removeAttr('novalidate');
});
</script>

 

Views: 2384

Standard