An AJAX validator mini-library that can be used with PristineJS

pristinejs-ajax-validator.js

/** usage */

var form = document.getElementById('formId');
var ajaxValidator = AjaxValidator(form);
ajaxValidator.add_field('fieldId', {url: '/url/to/validate/againt/{value}', message: 'Message to show user if it doesn\'t validate});
// {value} will be replaced by the value of the input
// The url should return a JSON (with proper header) message of {type: 'success', message: true|false}, where true means it's valid and false means it's not

var AjaxValidator = function(formElement, pristine=false) {
    var form;
    var fields = [];
    let internal = {
        add_error: function(field) {
            if (!field.messageEl) {
                field.messageEl = document.createElement('p');
                field.messageEl.classList = 'ajax-error'
                field.messageEl.innerText = field.message;
                field.el.insertAdjacentElement('afterend', field.messageEl);
                field.el.parentElement.classList.add('ajax-error');
            }
        },
        check_internal_fields: function() {
            var keys = Object.keys(fields);
            if (keys.length > 0) {
                keys.forEach(function(fieldId) {
                    var field = fields[fieldId];
                    if (!field.url) {
                        return false;;
                    }
                    if (!field.el.value) {
                        external.change_field(fieldId, false);
                        return false;
                    }
                    var url = field.url.replace('{value}',encodeURIComponent(field.el.value));
                    atomic(url)
                        .then(function(response) {
                            if (response.data.type == 'success') {
                                external.change_field(fieldId, response.data.content);
                            } else {
                                Notify.show_error('Validation for ' + fieldId + 'threw an error. Check your code.');
                            }
                        })
                        .catch(function(error) {
                            Notify.show_error(error.responseText);
                        });
                });
            }
        },
        check_status: function() {
            var status = true;
            fieldKeys = Object.keys(fields)
            fieldKeys.forEach(function(fieldName) {
                field = fields[fieldName];
                if (!field.el.value && field.required) {
                    status = false;
                } else if (field.el.value && !field.status) {
                    status = false;
                }
            });
            if (status && pristine.validate()) {
                debugger;
                form.submit();
            }
        },
        remove_error: function(field) {
            if (field.messageEl) {
                field.el.parentElement.classList.remove('ajax-error');
                field.messageEl.remove();
                delete field.messageEl;
            }
        },
        set_element: function(element) {
            form = element;
            if (!pristine) {
                pristine = new Pristine(form);
            }
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                pristine.validate();
                internal.check_internal_fields();
            });
        }
    };
    let external = {
        add_field: function(fieldId, data=false) {
            var field = { status: false };
            field.el = document.getElementById(fieldId);
            field.required = field.el.required;
            if (data) {
                field.url = data.url;
                field.message = data.message;
            }
            fields[fieldId] = field;
        },
        change_field: function(fieldId, status) {
            if (fields[fieldId] !== null) {
                var field = fields[fieldId];
                if (status) {
                    internal.remove_error(field);
                } else {
                    internal.add_error(field);
                }
                field.status = status;
            }
            internal.check_status();
        },
    };
    internal.set_element(formElement);
    return external;
};