Contact Form 7 jQuery

Question

I have a website that uses contact form 7 for my contact form.

I added a jQuery function that will focus the first empty fields before clicking the submit button.

What I want to do is when I clicked the submit button, all the fields are empty, I want to focus on the first empty fields after clicking the submit button.

What jquery function should i use? Now this is my JS:

$( ".col-form3").find( "input:first").focus();

NOTE. Before clicking the "Submit" button, the jquery caption is executed correctly.

Answer 1

You will do it as follows:

HTML:

<input type="text" name="t1" value="">
<input type="text" name="t2" value="">
<input type="text" name="t3" value="">
<input type="button" name="button" id="button" value="button">

$(document).ready(function(){
    $("#button").on('click',function(){
      $("input:not(:checkbox,:button)").each(function(){       
      if(!$(this).val() ) {
        $(this).focus();
        return false;
          }
      });
    });
});

FIDDLE DEMO

Answer 2

Below is the code below:

$(".wpcf7-submit").click(function(){
    $(".wpcf7-submit").ajaxComplete(function(){
        if($(".wpcf7-response-output").hasClass("wpcf7-validation-errors")){
            $(".wpcf7-form-control").each(function(){
                if($(this).val().length === 0){
                    $(this).focus();
                    return false;
                }
            });
        }
    });
});

Tell me if you have any doubts.

Answer 3

Try this java script code:

<script type="text/javascript">
jQuery(document).ready(function($){     
jQuery(".wpcf7-submit").ajaxComplete(function(){           
var check = jQuery( ".wpcf7-form").find( ".wpcf7-not-valid:eq( 0 )");
if(check)
{
check.focus();
}
});

});
</script>