prevent contact form 7 from submission on certain condition

Question

I have a contact form 7 form and in that I have an acceptance checkbox for terms and condition and I want to make that checkbox required and add some class when checkbox is not checked and prevent form from submission.So I tried using preventDefault().

<script>
$(".wpcf7-form).submit(function(event){
if($("#checkbox1").hasClass("check") == false){
  event.preventDefault();
  $("#checkbox1).addClass("error");
} else {
  $("#checkbox1).removeClass("error");
});
</script>

Now addclass line is working and for some reason preventDefault() is not working it is submitting my form everytime regardless of checkbox state.I want to make that checkobx required but I dont want to use acceptance's optional field as I dont want to disable my submit button. Any help will be helpful and thanks in advance.

Answer 1

If anyone still trying figure out the solution there is a additional settings which works like normal contact form 7 validation for other field just use acceptance_as_validation: on.

Answer 2

You can disable your submit button when your condition is met. That should do the job.

$('.wpcf7-form').submit(function(event) {
    var submitButton = $(this).find('input[type="submit"]');
    if ( $('#checkbox1').hasClass('check') == false ) {
        $('#checkbox1').addClass('error');
        submitButton.disabled = true;
    }
    else {
        $('#checkbox1').removeClass('error');
        submitButton.disabled = false;
    }
});