Integration

Integrate with other UI library

Principle

Most UI libraries trigger an event after changing the field value. By using this kind of event handler, you need to ask FormValidation to revalidate the field using the revalidateField() method.

The following snippet demonstrates how to validate a field by using both date validator and flatpickr, a lightweight and powerful datetime picker.


const fv = FormValidation.formValidation(form, {
    fields: {
        meetingTime: {
            ...
        },
    },
});

flatpickr(form.querySelector('[name="meetingTime"]'), {
    ...
    // After selecting a date, we need to revalidate the field
    onChange: function() {
        fv.revalidateField('meetingTime');
    },
});

More examples