Hey guys,
found a solution on myself that works for me. Perhaps it is helpful for others.
First of all I disable the next and submit button within the jvgf_initialize function:
var form = this;
if (jQuery(form).validate({onsubmit: false}).checkForm()) {
jQuery(‘.gform_next_button’).prop(‘disabled’, false);
jQuery(‘.gform_button’).prop(‘disabled’, false);
} else {
jQuery(‘.gform_next_button’).prop(‘disabled’, ‘disabled’);
jQuery(‘.gform_button’).prop(‘disabled’, ‘disabled’);
}
Then I validate the form on blur, keyup, click and change:
jQuery(‘input’).on(‘blur keyup click change’, function() {
if (jQuery(form).validate({onsubmit: false}).checkForm()) {
jQuery(‘.gform_next_button’).prop(‘disabled’, false);
jQuery(‘.gform_button’).prop(‘disabled’, false);
} else {
jQuery(‘.gform_next_button’).prop(‘disabled’, ‘disabled’);
jQuery(‘.gform_button’).prop(‘disabled’, ‘disabled’);
}
});
On next or previous page do also the validation:
jQuery(‘.gform_next_button’).click(function(){
jQuery(document).on(‘gform_page_loaded’, function(event, form_id, current_page){
if (jQuery(form).validate({onsubmit: false}).checkForm()) {
jQuery(‘.gform_next_button’).prop(‘disabled’, false);
jQuery(‘.gform_button’).prop(‘disabled’, false);
} else {
jQuery(‘.gform_next_button’).prop(‘disabled’, ‘disabled’);
jQuery(‘.gform_button’).prop(‘disabled’, ‘disabled’);
};
});
});
jQuery(‘.gform_previous_button’).click(function(){
jQuery(document).on(‘gform_page_loaded’, function(event, form_id, current_page){
if (jQuery(form).validate({onsubmit: false}).checkForm()) {
jQuery(‘.gform_next_button’).prop(‘disabled’, false);
jQuery(‘.gform_button’).prop(‘disabled’, false);
} else {
jQuery(‘.gform_next_button’).prop(‘disabled’, ‘disabled’);
jQuery(‘.gform_button’).prop(‘disabled’, ‘disabled’);
};
});
});
And finally add an additional option on the jQuery(this).validate({ …, onsubmit: false })
.
