Validate a string according to given HTML validation constraints

validator.js

export class Validator {
  /**
   * @param {string|object} constraints
   */
  constructor (constraints) {
    /**
     * @member {HTMLInputElement}
     * @private
     */
    this.input = Object.assign(
      document.createElement('input'),
      typeof constraints === 'string'
        ? { type: constraints }
        : constraints
    )
  }

  /**
   * @param {string} value
   * @returns {ValidityState}
   */
  validate (value) {
    this.input.value = value
    return this.input.validity
  }
}

Validator

Validates a string according to given HTML validation constraints -- most notably type="email", which is notoriously cumbersome to implement "manually". You most probably copy / pasted the RegExp from this classic thread on SO at some point; instead, we can just leverage the native HTML validation for a more robust solution.

Usage

You can pass a string or a constraints object to the constructor; the Validator instance has just one validate() method that takes a string and returns a ValidityState.

Passing The Type

In the basic form just pass an input element type to validate against:

const emailValidator = new Validator('email')

emailValidator.validate('foo') // { valid: false, typeMismatch: true }
emailValidator.validate('[email protected]') // { valid: true }

Passing Attributes

For more complex validation, pass an object of constraint attributes you'd apply to an input element:

const patternValidator = new Validator({ pattern: '^foo$', required: true })

patternValidator.validate('foo') // { valid: true  }
patternValidator.validate('baz') // { valid: false, patternMismatch: true }
patternValidator.validate('') // { valid: false, valueMissing: true }

Final Thoughts

Admittedly, the only real use case would be email validation, or maybe URLs.

License

MIT 2019