Validation on click in contact form 7

2 Views

I am building custom step-by-step form based on Contact Form 7 and i need to validate field before going to next section. how i can call validate function on click? I can’t find it in documentation. 

$( "#next-section" ).click(function() {

  //call validate function (how to do this)??

  if('validate function no errors') {
    //call my scripts 
  }
});
Post Views: 2

Related posts

3 comments

  1. You can do this : 

    $( "#next-section" ).click(function() {
  $('your-form').submit();
});

  2. You can call .validate plugin for form validation.

    $( "#next-section" ).click(function() {
   $("#form").validate({
      rules: {
         name: "required",
      },
      messages: {
         name: "name is required",
      },
      submitHandler: function(form) {
         form.submit();
      }
    });
});

  3. I have faced the same problem and got a solution.

    I have 2 steps form, and I had an idea to submit the form and then check whether input fields on 1st step were validated (obviously, the form cannot be sent cause there are few fields on a 2nd step, this was made just to use CF7 validation).

    $('.go_to_step_2').on('click', function () {

    var input = $('input[name="your-name"]'),
        form = $(this).parents('.wpcf7-form');

    form.submit();

    // trigger just one time! so validation works correctly in the 2nd step
    form.parent().one('wpcf7:invalid', function() {

        if( !input.hasClass('wpcf7-not-valid') ) {

            // this will hide valid-tips from step 2
            $('.step_2').find('.wpcf7-not-valid-tip').fadeOut(0);

            // do stuff to show step 2
        }
    });
});

Comments are closed.