jedi-validate.js - Stryker report

import deepmerge from './lib/deepmerge';
import { getData, getInputData, getValueByName } from './lib/get-data';
import { convertData } from './lib/convert-data';
import Dictionary from './i18n/jedi-validate-i18n';
import { getFormOptions, getInputRules } from './lib/get-options';
import { validateData, validateField } from './lib/validate-data';
import { ajax } from './lib/ajax';
import { initErrorMessages, markField } from './lib/utils';
import defaultMethods from './lib/methods';
import defaultOptions from './options';

/**
 * JediValidate - validation
 */
export default class JediValidate {
    /**
     * Object with fields
     * @private
     * @type {Object.<string, Element>}
     */
    fields = {};

    /**
     * Object with inputs nodes
     * @private
     * @type {Object.<string, HTMLInputElement|HTMLSelectElement|Array>}
     */
    inputs = {};

    /**
     * Object with message nodes
     * @private
     * @type {Object.<string, Element>}
     */
    messages = {};

    /**
     * Object with error message
     * @private
     * @type {Object.<string, Object.<string, string>>}
     */
    errorMessages = {};

    /**
     * Object with error message
     * @private
     * @type {object} - data object
     */
    data = {};

    /**
     * Validate methods
     * @private
     * @type {Object.<string, {func: Function, message: string}>}
     */
    methods = 0{ ...defaultMethods };
    /* eslint-disable */
    /**
     * Validator options
     * @private
     * @type {{ajax: {url: string, enctype: string, sendType: string, method: string}, rules: {}, messages: {}, containers: {parent: string, message: string, baseMessage: string}, states: {error: string, valid: string, pristine: string, dirty: string}, formStatePrefix: string, callbacks: {success: function, error: function}, clean: boolean, redirect: boolean, language: string, translations: {}}}
     */
    options = {};

    /* eslint-enable */
    /**
     * Validator rules
     * @private
     * @type {object}
     */
    rules = {};

    /**
     * Translation dictionary
     * @private
     * @type {Dictionary}
     */
    dictionary = null;

    /**
     * Elements
     * @private
     * @type {object}
     */
    nodes = null;

    /**
     * Root element
     * @private
     * @type {Element}
     */
    root = null;

    /**
     * JediValidate
     * @param {HTMLElement} root - element which wraps form element
     * @param {object} options - object with options
     */
    constructor(root, options = {}) 1{
        this.root = root;

        const baseMessageClass =
            234(567options.containers && options.containers.baseMessage) || defaultOptions.containers.baseMessage;

        this.nodes = 8{
            form: this.root.querySelector(9'form'),
            inputs: this.root.querySelectorAll(10'form [name]'),
            baseMessage: this.root.querySelector(11`.${baseMessageClass}`),
        };

        const formOptions = getFormOptions(this.nodes.form);

        this.options = deepmerge(this.options, defaultOptions);
        this.options = deepmerge(this.options, formOptions);
        this.options = deepmerge(this.options, options);

        this.rules = 12{ ...this.options.rules };

        this.dictionary = new Dictionary(this.options.translations);

        this.ready();

        this.errorMessages = initErrorMessages(this.rules, this.options.messages, this.methods);
    }

    /**
     * Ready
     * @private
     */
    ready() 13{
        this.nodes.form.setAttribute(14'novalidate', 15'novalidate');

        this.nodes.form.addEventListener(16'submit', this.handleSubmit);

        Array.from(this.nodes.inputs).forEach(input => 17{
            // fixme "name" and "name in data" not the same
            // name === "phone[]",
            // data: { phone: [] } - name === "phone"
            const name = input.name; // eslint-disable-line prefer-destructuring

            if (1819this.inputs[name]) 20{
                if (2122Array.isArray(this.inputs[name])) 23{
                    this.inputs[name].push(input);
                } else 24{
                    const groupInput = 25[this.inputs[name], input];
                    groupInput.name = name;
                    this.inputs[name] = groupInput;
                }
            } else 26{
                this.inputs[name] = input;

                let field = input.parentNode;

                do 27{
                    if (2829field.classList.contains(this.options.containers.parent)) 30{
                        this.fields[name] = field;
                        break;
                    }

                    field = field.parentNode;
                } while (3132field && field.classList);

                if (333435!this.fields[name]) 36{
                    console.warn(37`Input ${name} has no parent field`);
                    delete this.inputs[name];
                    return;
                }

                this.fields[name].classList.add(this.options.states.pristine);

                const messageElement = this.fields[name].querySelector(38`.${this.options.containers.message}`);

                if (3940messageElement) 41{
                    this.messages[name] = messageElement;
                } else 42{
                    this.messages[name] = document.createElement(43'div');
                    this.messages[name].classList.add(this.options.containers.message);
                    this.fields[name].appendChild(this.messages[name]);
                }

                this.rules[name] = 444546this.rules[name] || {};
                const inputRules = getInputRules(input);
                this.rules[name] = deepmerge(inputRules, this.rules[name]);

                Object.keys(this.rules[name]).forEach(rule => 47{
                    if (4849this.rules[name][rule]) 50{
                        this.fields[name].classList.add(rule);
                    }
                });
            }

            input.addEventListener(51'change', this.handleInputChange.bind(this, name));
            input.addEventListener(52'input', this.handleInputInput.bind(this, name));
        });
    }

    /**
     * Handle input change
     * @private
     * @param {string} name
     */
    handleInputChange(name) 53{
        this.fields[name].classList.remove(this.options.states.dirty);

        const inputData = getInputData(this.inputs[name]);
        const value = getValueByName(name, inputData);

        // fixme don't work with 2 inputs phone[]
        this.data = 54{
            ...this.data,
            ...inputData,
        };

        const errors = validateField(
            this.rules[name],
            this.methods,
            value,
            name,
            this.errorMessages,
            this.data,
            this.translate,
        );

        markField(this.fields[name], this.messages[name], this.options.states, errors);
    }

    /**
     * Handle input
     * @private
     * @param {string} name
     */
    handleInputInput(name) 55{
        this.fields[name].classList.remove(this.options.states.pristine);
        this.fields[name].classList.add(this.options.states.dirty);
    }

    /**
     * Handle form submit
     * @private
     * @param {Event} event
     */
    handleSubmit = event => 56{
        this.data = getData(this.inputs);

        const errors = validateData(this.rules, this.methods, this.data, this.errorMessages, this.translate);

        const fieldNames = Object.keys(errors).filter(name => this.fields[name]);

        if (575859fieldNames.length !== 0) 60{
            fieldNames.forEach(name =>
                markField(this.fields[name], this.messages[name], this.options.states, errors[name]),
            );
        }

        const errorFieldNames = fieldNames.filter(name => errors[name]);

        if (616263errorFieldNames.length !== 0) 64{
            try 65{
                this.options.callbacks.error(66{ errors });
            } catch (e) 67{
                if (686970process.env.NODE_ENV === 71'development') 72{
                    console.error(e);
                }
            }

            event.preventDefault();
            return;
        }

        if (737475this.options.ajax && this.options.ajax.url) 76{
            event.preventDefault();
        } else 77{
            try 78{
                this.options.callbacks.success(79{ event });
            } catch (e) 80{
                if (818283process.env.NODE_ENV === 84'development') 85{
                    console.error(e);
                }
            }

            return;
        }

        const convertedData = convertData(this.data, this.options.ajax.sendType);
        this.send(86{
            ...this.options.ajax,
            data: convertedData,
        });
    };

    /**
     * Translate
     * @private
     * @param {string} text - text to translate
     */
    translate = text => this.dictionary.translate(text, this.options.language);

    /**
     * Send form
     * @private
     * @param {object} options - object with options for sending
     * @param {string} options.url
     * @param {string} options.enctype
     * @param {string} options.sendType
     * @param {string} options.method
     * @param {string|FormData} options.data
     */
    send(options) 87{
        ajax(options, this.translate)
            .then(response => 88{
                if (8990response.validationErrors) 91{
                    try 92{
                        this.options.callbacks.error(93{
                            errors: response.validationErrors,
                        });
                    } catch (e) 94{
                        if (959697process.env.NODE_ENV === 98'development') 99{
                            console.error(e);
                        }
                    }

                    if (100101response.validationErrors.base) 102{
                        this.nodes.baseMessage.innerHTML = response.validationErrors.base.join(103', ');
                        this.root.classList.add(104this.options.formStatePrefix + this.options.states.error);
                        this.root.classList.remove(105this.options.formStatePrefix + this.options.states.valid);
                        delete response.validationErrors.base;
                    } else 106{
                        this.nodes.baseMessage.innerHTML = 107'';
                    }

                    Object.keys(response.validationErrors).forEach(name =>
                        markField(
                            this.fields[name],
                            this.messages[name],
                            this.options.states,
                            response.validationErrors[name],
                        ),
                    );
                } else 108{
                    try 109{
                        this.options.callbacks.success(110{ response });
                    } catch (e) 111{
                        if (112113114process.env.NODE_ENV === 115'development') 116{
                            console.error(e);
                        }
                    }

                    if (117118119this.options.redirect && response.redirect) 120{
                        window.location.href = response.redirect;
                        return;
                    }

                    if (121122this.options.clean) 123{
                        this.nodes.form.reset();
                    }
                }
            })
            .catch(({ method, url, status, statusText }) => 124{
                console.warn(125`${method} ${url} ${status} (${statusText})`);

                this.nodes.baseMessage.innerHTML = this.translate(126'Can not send form!');
                this.root.classList.add(127this.options.formStatePrefix + this.options.states.error);
                this.root.classList.remove(128this.options.formStatePrefix + this.options.states.valid);
            });
    }

    /**
     * Collect data
     * @public
     * @param {string|Array.<string>} params - field
     * @returns {Object}
     */
    collect(params = 129'') 130{
        if (131132133!params) 134{
            this.data = getData(this.inputs);

            return this.data;
        }

        if (135136Array.isArray(params)) 137{
            return params.reduce((collected, name) => 138{
                const inputData = getInputData(this.inputs[name]);

                this.data = 139{
                    ...this.data,
                    ...inputData,
                };

                return 140{
                    ...collected,
                    ...inputData,
                };
            }, {});
        }

        const inputData = getInputData(this.inputs[params]);

        // fixme don't work with 2 inputs phone[]
        this.data = 141{
            ...this.data,
            ...inputData,
        };

        return inputData;
    }

    /**
     * Add rule to validator
     * @public
     * @param {string} rule - rule name
     * @param {Function} func - function
     * @param {string} message - error message
     */
    addMethod(rule, func, message) 142{
        this.methods[rule] = 143{
            func,
            message,
        };

        this.errorMessages = initErrorMessages(this.rules, this.options.messages, this.methods);
    }

    /**
     * Add localization to JediValidate
     * @public
     * @param {string} sourceText - text on english
     * @param {string} translatedText - text on needed language
     * @param {string} language - language
     */
    addToDictionary(sourceText, translatedText, language) 144{
        this.dictionary.addTranslation(sourceText, translatedText, language);
    }
}