1

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 
  }
});
Ponciusz
  • 147
  • 3
  • 18
  • i think you need this . http://stackoverflow.com/questions/27798264/contact-form-7-ajax-callback/27799147#27799147 – Noman Mar 30 '16 at 10:55

3 Answers3

0

You can do this :

$( "#next-section" ).click(function() {
  $('your-form').submit();
});
Greg
  • 826
  • 5
  • 21
  • not working. its good idea but how i can init submit on contactform7 in jquery? – Ponciusz Mar 30 '16 at 10:05
  • The problem will occur also when i want to validate and fields after visible content has errors so it will not let use go further more – Ponciusz Mar 30 '16 at 10:19
  • No need init submit. submit() is a function jquery for submit a form. But not verify the fields. Because the .submit() don't use html 5 property in dom. – Greg Mar 30 '16 at 11:30
0

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();
      }
    });
});
0

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
        }
    });
});