Contact form 7 call submit event in jQuery

Question

I have a simple contact form and in the end I added a custom field:

<input type="text" name="test" id="test" class="form-control">

I need to check field is empty and then submit form:

$('.wpcf7-submit').on('click', function (e) {
    e.preventDefault();

    var testInput = $('input[name="test"]').val();

    if (testInput != '') {
        // How to submit form here?
    }
});

How to do it?

Answer 1

you may preventDefault if the input is empty like so:

$('.wpcf7-submit').on('click', function (e) {
var testInput = $('input[name="test"]').val();

if (testInput === '') {
    e.preventDefault();

}

});

OR:

$('.wpcf7-submit').on('click', function (e) {
e.preventDefault();

var testInput = $('input[name="test"]').val();

if (testInput != '') {
    $('#form-id').submit();
}

});

Hope it will help.

Answer 2

First check if it's empty, then preventDefault. It will then submit otherwise

$('.wpcf7-submit').on('click', function (e) {
    var testInput = $('input[name="test"]').val();

    if (testInput === '') {
        e.preventDefault();
    }
});

EDIT:

You should also consider that people do not submit by pressing submit, but by pressing enter - therefore you should proably do something like this:

$('#myForm').on('submit', function() {
  ....
}

Instead of listening to the click

Answer 3

This should work :

$('.wpcf7-submit').submit();