Support

Account

Home Forums General Issues Frontend form – post via ajax? Reply To: Frontend form – post via ajax?

  • In input.js the function acf.validateForm(args) is defined.
    This function can be used to trigger the validation of a frontend form.
    You can set args the following way:

    const args = {
    form: $form //required. The form you are submitting
    
    //the following default values ar set in validate:function(args) :
    
    // trigger event
    event: false,
    		
    // reset the form after submit
    reset: false,
    				
    // loading callback
    loading: function(){},
    				
    // complete callback
    complete: function(){},
    				
    // failure callback
    failure: function(){},
    				
    // success callback
    success: function( $form ){
       $form.submit();
       }
    }

    The default success callback starts submission when validation is is successful.
    You can replace this function by any other function.

    So you can block the validation and submission and call acf.validateForm:

    $('.cursus-info').on('click','.acf-button',function() {
    
    $('form#acf-form').on('submit',function(event){
    event.preventDefault();
    });
    
    args= {
    form: $form,
    reset: true
    success: function($form) {
    
    //Your ajax code or what ever you want to do
    
    }
    
    }
    
    acf.validateForm(args);
    	
    }

    In addition to submitting by ajax using acf.validateForm offers many other possibilities like validating without submisssion, do things when validation fails by defining the failure callback etc.