Showing custom message returned from server

As you know, each validator provides the message option to define the error message in case the field doesn't pass the associated validator. It's recommended to perform the validation on server side after the form passes the client side validation.

The usual question is that how to show the messages from the server if the field doesn't pass the validation on server side. This example will show a handy approach which is described as following steps. To demonstrate the implementation, the example uses a simple registration form that consists of three fields for filling the username, email address and password.

Defining the validation rules

In addition to usual validators, we also attach a special validator called blank to each field which need to show the custom message returned from the server. The blank validator doesn't have any option:

const fv = FormValidation.formValidation(
    form,
    {
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        ...
                    },
                    stringLength: {
                        ...
                    },
                    regexp: {
                        ...
                    },
                    blank: {},
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        ...
                    },
                    emailAddress: {
                        ...
                    },
                    blank: {},
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        ...
                    },
                    blank: {},
                }
            },
        }
    }
);

Since the blank validator always returns true, the field is supposed to pass it whenever the validation is performed in the client side.

Submitting the form data via Ajax

When all fields satisfy the validation rules, we can trigger the core.form.valid event event to send the form data to server via an Ajax request:

const fv = FormValidation
    .formValidation(
        form,
        {
            fields: {
                ...
            }
        }
    )
    .on('core.form.valid', function() {
        // Send data to back-end
        FormValidation.utils.fetch('/path/to/your/back-end/', {
            params: {
                username: form.querySelector('[name="username"]').value,
                email: form.querySelector('[name="email"]').value,
                password: form.querySelector('[name="password"]').value,
            }
        }).then((response) => {
            // We will display the messages from server if they're available
        });
    });

We're using a built in helper method, FormValidation.utils.fetch, to send the data to given back-end. Anyway, you can use whatever method you're familiar with such as Github's fetch implementation

The error messages returned from server will be processed inside the response handler of the Ajax request. We will see how to do that in the next step.

Showing message returned from the server

After getting the data sent from the client via the Ajax request, the server will perform validation using certain programming language. Depend on the validation result, it might response an encoded JSON as

// A sample response if all fields are valid
{
    "result": "ok"
}

// A sample response if there is an invalid field.
// It also tell which and the reason why the field is not valid
{
    "result": "error",
    "fields": {
        "username": "The username is not available",
        "password": "You need to have more secure password"
        ...
    }
}

Lastly, we can use the updateValidatorOption() and updateFieldStatus() methods to set the message and validation result of the blank validator:

const fv = FormValidation
    .formValidation(
        ...
    )
    .on('core.form.valid', function() {
        // Send data to back-end
        FormValidation.utils.fetch('/path/to/your/back-end/', {
            params: {
                username: form.querySelector('[name="username"]').value,
                email: form.querySelector('[name="email"]').value,
                password: form.querySelector('[name="password"]').value,
            }
        }).then((response) => {
            if (response.result === 'error') {
                for (const field in response.fields) {
                    fv
                        // Update the message option
                        .updateValidatorOption(
                            field, 'blank', 'message', response.fields[field]
                        )
                        // Set the field as invalid
                        .updateFieldStatus(field, 'Invalid', 'blank');
                }
            } else {
                // Do whatever you want here
                // such as showing a modal ...
            }
        });
    });

Following is a working example that illustrates all steps above:

For demonstrating purpose, the form randomly displays a custom message for the username field no matter what you put in it

Showing custom message returned from server

Showing custom message returned from server

Defining the validation rules

Submitting the form data via Ajax

Showing message returned from the server

See also