Last active
April 13, 2022 09:52
-
-
Save abdelgrib/953554f474eca93272871a22483c0498 to your computer and use it in GitHub Desktop.
JavaScript, HTML5 - Form helper
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export default class FormHelper { | |
| /** | |
| * Check input for validity using JavaScript/HTML5 client-side form validation | |
| * Link : https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation | |
| * @param {object} target - e.g. JavaScript event.target or selected HTML element object | |
| * @returns {string []} - Errors list | |
| */ | |
| static inputValidation = (target) => { | |
| if (!target) return null; | |
| let errors = []; | |
| if (target.checkValidity() || target.validity.valid) { | |
| return errors; | |
| } | |
| const validityState = target.validity; | |
| /*required*/ | |
| if (validityState.valueMissing) errors.push("Required field"); | |
| /*type, pattern*/ | |
| if (validityState.typeMismatch || validityState.patternMismatch) | |
| errors.push("Invalid format"); | |
| /*maxlength, minlength, min, max, step (number type), convert*/ | |
| if ( | |
| validityState.tooLong || | |
| validityState.tooShort || | |
| validityState.rangeUnderflow || | |
| validityState.rangeOverflow || | |
| validityState.stepMismatch || | |
| validityState.badInput | |
| ) | |
| errors.push("Invalid value"); | |
| /*custom*/ | |
| if (validityState.customError) | |
| errors.push("Custom error was added using setCustomValidity"); | |
| return errors; | |
| }; | |
| /** | |
| * Get input by its name and check it for validity, useful for named field (React.js, Angular) | |
| * @param {string} name - Value of name attribute of the input | |
| * @returns {string []} - Errors list | |
| */ | |
| static isValidInput = (name) => { | |
| if (!name) return null; | |
| const target = document.querySelector(`input[name=${name}]`); | |
| const inputErrors = this.inputValidation(target); | |
| return !inputErrors || inputErrors.length === 0; | |
| }; | |
| /** | |
| * Get and check a list of inputs | |
| * @param {string} names - Input names list | |
| * @returns {string []} - Errors list | |
| */ | |
| static isValidInputs = (names) => { | |
| if (!names || names.length === 0) return null; | |
| for (let i = 0; i < names.length; i++) { | |
| if (!this.isValidInput(names[i])) return false; | |
| } | |
| return true; | |
| }; | |
| /** | |
| * Generate an object from HTML form | |
| * @param {object} form - Form object (e.g. document.querySelector("form")); | |
| * @returns {object} - Form values | |
| */ | |
| static objectifyForm = (form) => { | |
| /* Can use 'new FormData(form)' */ | |
| const objectForm = {}; | |
| const elements = form.elements; | |
| for (let i = 0; i < elements.length; i++) { | |
| objectForm[elements[i].name] = elements[i].value; | |
| } | |
| return objectForm; | |
| }; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment