core.form.valid event

Triggered when the form is completely validated, and all fields are valid

Example: Using Ajax to submit the form

After clicking the Submit button, all fields will be validated automatically if the SubmitButton plugin is enabled. Usually you have two choices in the case all fields pass their validations:

  • Submit the form to the server. It can be done via the DefaultSubmit plugin
  • Send the form data to server via an Ajax request.

For the second scenario, you can handle the core.form.valid event as following


FormValidation
    .formValidation(
        document.getElementById('demoForm'),
        {
            fields: {
                ...
            },
            plugins: {
                ...
            },
        }
    )
    .on('core.form.valid', function() {
        // Send the form data to back-end
        // You need to grab the form data and create an Ajax request to send them
        
        FormValidation.utils.fetch('/path/to/your/back-end/', {
            method: 'POST',
            params: {
                fieldName: fieldValue,
                otherFieldName: otherFieldValue,
                ...
            },
        }).then(function(response) {
            // Depending on the response from server, you can display a notification
            // to let user know if the form is sent successfully
            ...
        });
    });

The sample code above uses a built in method FormValidation.utils.fetch(url, options) to send data to given url. It's up to you to choose your favourite library for doing the same thing, such as axios:



...

document.addEventListener('DOMContentLoaded', function(e) {
    FormValidation
        .formValidation(
            document.getElementById('demoForm'),
            {
                ...
            }
        )
        .on('core.form.valid', function() {
            axios({
                method: 'post',
                url: '/path/to/your/back-end/',
                data: {
                    fieldName: fieldValue,
                    otherFieldName: otherFieldValue,
                    ...
                },
            }).then(function(response) {
                ...
            });
        });
});
    

Example: Multiple steps wizard

Tip

Use the Wizard plugin to support validating multiple steps form.

In this example, you will learn how to use FormValidation to validate a multiple steps wizard. The wizard is actually a normal form but is split into multiple steps. By default, all steps are hidden except the active one.

We can imagine that the form is structured as following:




...
...

We initialize a FormValidation instance for each step. Also, we will bring user to the next step when a step is successfully validated:


const demoForm = document.getElementById('demoForm');
    
const step1 = demoForm.querySelector('.js-step[data-step="1"]');
const step2 = demoForm.querySelector('.js-step[data-step="2"]');

const prevButton = demoForm.querySelector('[id="prevButton"]');
const nextButton = demoForm.querySelector('[id="nextButton"]');

// Track the current step
let currentStep = 1;

// Set the rule for fields in the first step
const fv1 = FormValidation
    .formValidation(
        step1, 
        {
            fields: {
                ...
            },
            plugins: {
                ...
            },
        }
    )
    .on('core.form.valid', function() {
        // Jump to the next step when all fields in the current step are valid
        currentStep++;

        nextButton.innerHTML = 'Purchase';

        // Hide the first step
        FormValidation.utils.classSet(step1, {
            'js-step-active': false,
        });
        
        // Show the next step
        FormValidation.utils.classSet(step2, {
            'js-step-active': true,
        });
    });

// Set the rule for fields in the second step
const fv2 = FormValidation
    .formValidation(
        step2,
        {
            fields: {
                ...
            },
            plugins: {
                ...
            },
        }
    )
    .on('core.form.valid', function() {
        // You can submit the form
        // demoForm.submit()
        // or send the form data to server via an Ajax request

        // To make the demo simple, I just update the label of button
        nextButton.innerHTML = 'Done';
    });

The sample code uses the built in method, FormValidation.utils.classSet, to set the CSS classes for given element.

Now, we need to validate the current step when clicking the Next button. It can be done via the validate() method:


nextButton.addEventListener('click', function() {
    // When click the Next button, we will validate the current step
    switch (currentStep) {
        case 1:
            fv1.validate();
            break;
        
        case 2:
            fv2.validate();
            break;
        
        default:
            break;
    }
});

Going to the previous step is much simple:


prevButton.addEventListener('click', function() {
    switch (currentStep) {
        case 2:
            currentStep--;
            nextButton.innerHTML = 'Next';
            
            // Hide the second step
            FormValidation.utils.classSet(step2, {
                'js-step-active': false,
            });
            
            // Show the first step
            FormValidation.utils.classSet(step1, {
                'js-step-active': true,
            });
            break;

        case 1:
        default:
            break;
    }
});    

This example only has two steps, but we can use the same approach if your wizard has more steps. You can play with it in the demo below: