How to trigger validation from another button without submitting

Resolved Mark Louie "espidesigns" Espedido
(@espidesigns)

7 years, 7 months ago

Our website is using Contact Form 7 plugin for our long forms. I just added a feature to be able to download a PDF version of the long forms, with the user’s manually entered fields, with a click of a button. Let’s call it the “Export” button. Then they can choose to email that PDF to us whenever they are ready.

But what’s needed from these forms are that they some be completely filled. In normal use, a user submits the form successfully when the required fields are complete and valid. On the other hand, the “Export” button when pressed should check the required fields first (with ajax validation) before exporting the PDF download.

Right now, the “Export” button just downloads the PDF form even with the form fields empty. This is achieved using jsPDF. How can this “Export” button validate the required fields first before generating the PDF version of the form, without submitting the form, using CF7’s validation error messages? Thanks in advance

Viewing 3 replies - 1 through 3 (of 3 total)

Thread Starter

(@espidesigns)

I found a way to validate the forms simply by checking if the required fields are empty or not. Plus email fields need to be valid email address in order to proceed.

var exportform_has_error = true; // if exportform_has_error==true, it means there is at least 1 error

  $( '.exportform__button' ).on( 'click', function(event) {

    var $form = $( event.target ).closest( 'form' );
    var has_errors = [];

    $form.find( '.wpcf7-validates-as-required' ).each( function( index ) {
      
      if( $(this).hasClass( 'wpcf7-checkbox' ) ) {
        // for acceptance + required checkboxes
        has_errors[index] = $(this).find( 'input[type=checkbox]' ).prop( 'checked' ) ? 'no' : 'yes';
        has_errors[index] == 'no' ? $(this).closest( '.wpcf7-checkbox' ).removeClass( 'wpcf7-not-valid' ).next( '.wpcf7-not-valid-tip' ).hide() : $(this).closest( '.wpcf7-checkbox' ).addClass( 'wpcf7-not-valid' ).next( '.wpcf7-not-valid-tip' ).show();
      
      } else if( $(this).hasClass( 'wpcf7-select' ) ) {
        // for required select dropdown multi-option
        has_errors[index] = $(this).find( 'select' ).val() != '' ? 'no' : 'yes';
        has_errors[index] == 'no' ? $(this).removeClass( 'wpcf7-not-valid' ).next( '.wpcf7-not-valid-tip' ).hide() : $(this).addClass( 'wpcf7-not-valid' ).next( '.wpcf7-not-valid-tip' ).show();

      } else if ( $(this).hasClass( 'wpcf7-validates-as-email' ) ) {
        // for required email field
        has_errors[index] = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i.test(this.value) ? 'no' : 'yes'; 

        has_errors[index] == 'no' ? $(this).removeClass( 'wpcf7-not-valid' ).next( '.wpcf7-not-valid-tip' ).hide() : $(this).addClass( 'wpcf7-not-valid' ).next( '.wpcf7-not-valid-tip' ).show();

      } else {
        // for other required text fields
        has_errors[index] = $(this).val() != '' ? 'no' : 'yes'; 
        has_errors[index] == 'no' ? $(this).removeClass( 'wpcf7-not-valid' ).next( '.wpcf7-not-valid-tip' ).hide() : $(this).addClass( 'wpcf7-not-valid' ).next( '.wpcf7-not-valid-tip' ).show();
      }

      // if ( has_errors[index] == 'yes' ) {
      //   console.log( 'error at ' + index );
      // }
    });

    if( jQuery.inArray( 'yes', has_errors ) !== -1 ) {

      exportform_has_error = true;
      // if there is error in the form, 
      // add your custom error handling scripts in this section
      console.log( 'Form has invalid fields!' );
      return;
    } else {
      exportform_has_error = false;
      // if there is NO error in the form,
      // add your custom success handling scripts in this section
      console.log( 'Form is valid!' );
    }
  });
})();