Custom JavaScript error callbacks

There are 3 error callbacks available for you to alter the behaviour when the form contains errors. These callbacks are called when the form contains errors i.e. elements have not passed validation.

• errorStart
• error
• errorEnd

errorStart

errorStart is called before any other error processing code is run. If you want to run any code before anything else this is the place to do it. You can add this on line 3 of js/scripts.js

1
2
3
4
5

$('form.quform').Quform({
    errorStart: function (response) {
        // Your custom JavaScript
    }
});

$('form.quform').Quform({
    errorStart: function (response) {
        // Your custom JavaScript
    }
});

For example to show a message after the submit button if the form has errors, use the following code in js/scripts.js and change the code on line 3:

1
2
3
4
5
6

$('form.quform').Quform({
    errorStart: function(response) {
        $('.form-error', this.$form).remove(); // Remove any previous error messages
        this.$container.after('<div class="form-error">There was an error in the form</div>');
    }
});

$('form.quform').Quform({
    errorStart: function(response) {
        $('.form-error', this.$form).remove(); // Remove any previous error messages
        this.$container.after('<div class="form-error">There was an error in the form</div>');
    }
});

error

If you specify an error callback this will override the default form error functionality of appending the errors beneath the input for each element, so you will be able to customise how the errors are displayed. If you do specify a custom error function the errorEnd function hook will no longer be available, unless you include it in your own code of course. You can add this on line 3 of js/scripts.js

1
2
3
4
5

$('form.quform').Quform({
    error: function (response) {
        // Your custom JavaScript
    }
});

$('form.quform').Quform({
    error: function (response) {
        // Your custom JavaScript
    }
});

errorEnd

The errorEnd function is called after the default error functionality of displaying the errors underneath the input elements has completed. You can add this on line 3 of js/scripts.js

1
2
3
4
5

$('form.quform').Quform({
    errorEnd: function (response) {
        // Your custom JavaScript
    }
});

$('form.quform').Quform({
    errorEnd: function (response) {
        // Your custom JavaScript
    }
});

Data accessible from inside your custom functions

• this – The Quform object instance
  • this.$form – The jQuery object representing your form
  • this.options – The options object passed to the Quform instance
  • this.$container – The jQuery object representing the form element container
  • this.$loading – The jQuery object representing the loading text/gif
  • this.$submitButton – The jQuery object representing the submit button
• response – The Ajax response from the server