Native email validation

[ShoobyD]

I've noticed that the email validation rule is being handled via a RegExp:
https://github.com/formkit/formkit/blob/master/packages/rules/src/email.ts

const email: FormKitValidationRule = function email({ value }) {
  const isEmail = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
  return isEmail.test(String(value))
}

But all browsers have a build-in email validator for input[type=email] tags, and IMHO everything that can be done natively by the browser, should be done by the browser;
So, I'm suggesting replacing this direct validation with something like:

import { FormKitValidationRule } from '@formkit/validation'

const emailValidatorElement: HTMLInputElement = document.createElement( 'input' );
emailValidatorElement.type = 'email';

/**
 * Determine if the given input's value is a plausible email address.
 * @param context - The FormKitValidationContext
 * @public
 */
const email: FormKitValidationRule = function email({ value }) {
  emailValidatorElement.value = value;
  return emailValidatorElement.validity.valid;
}

export default email

Besides avoiding reinventing the wheel, this approach is also much clearer and more readable in my opinion. 🙂

[justin-schroeder]

This would be a great idea, but all FormKit validation rules and code need to be fully isomorphic so they can be run both on the server and in the browser — so we cannot rely on browser APIs where DOM nodes are strictly available. You can of course add your own email validation to the dom elements for browser validation if you prefer that one.

[ShoobyD]

Understood. Thanks for your reply!