CODEWITHSUNDEEP
jquerywordpresscontact-form-7
Ponciusz
Ponciusz

Reputation: 147

Validation on click in contact form 7

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

Upvotes: 1

Views: 10122

Answers (3)

Rostyk Chaikivskyi
Rostyk Chaikivskyi

Reputation: 1

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

Upvotes: 0

RaviKant Sharma
RaviKant Sharma

Reputation: 16

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

Upvotes: 0

Greg
Greg

Reputation: 836

You can do this : 

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

Upvotes: 0

Related Questions