Events

Form Gadget sends and listens for a number of Document events. All events are browser based, and can be sent or listened for using Javascript.

Dispatched Events

All dispatched events have an event.detail object. The event.detail object contains properties specific to that event, as well as a reference to the form that caused the event.

Post Validate

The Post Validate event is run immediately after the automatic form validation. The event happens before submitting the AJAX request to Form Gadget, and is an opportunity to add custom validation.

It is often used in conjunction with the Validate Form event.

document.addEventListener('form-gadget-post-validate',
    function(event){
        console.log('form-gadget-post-validate event');
        console.log(event.detail);
        console.log("is form valid? ", event.detail.isFormValid);
        console.log('/form-gadget-post-validate event');
    }
);

Pre-Submit

The Pre-Submit event is run before submitting the AJAX request to Form Gadget. This event is an opportunity to modify the data object before it is sent. It has been successfully used in the past to include analytics information, add constants, etc.

document.addEventListener('form-gadget-pre-submit',
    function(event){
        console.log('form-gadget-pre-submit');
        console.log(event.detail);
        console.log("Data to be sent to Form Gadget: ", event.detail.data);
        console.log('form-gadget-pre-submit');
    }
);

Post Submit

The Post-Submit event is run after the AJAX request to Form Gadget is sent. The AJAX response is contained in the event.data object, and can be used to take action on successful or unsuccessful requests. Often it is used to show a success message.

document.addEventListener('form-gadget-post-submit',
    function(event){
        console.log('form-gadget-post-submit');
        console.log(event.detail);
        console.log("AJAX request status: ", event.detail.request.status);
        console.log('form-gadget-post-submit');
    }
);

Listened For Events

These are events that Javascript code can create to kickoff Form Gadget code. Each sent event must include a reference to the Form Gadget.

Validate Form

The Form Gadget Javascript code listens for a validation event that can kickoff the form validation process. By default form validation happens as a user fills out values of the form.

Occasionally, validation is required after an external event, and in such cases, the Validate Form event can be used.

var event = document.createEvent('Event');
event.initEvent('form-gadget-validate-form', true, true);
event.detail = { "form" : formElement };
console.log('custom event: ', event);
document.dispatchEvent(event);