JSFiddle - React, Tailwind, and code Playground

by Stepan Suvorov

HTML

<form>First name:
    <input name="" required />
    <br/>Last name:
    <input name="" required />
    <br/>Email:
    <input name="email" type="email" required value="mail@mail.com" />
    <br/>Site:
    <input name="url" type="url" required />
    <br/>Promocode:
    <input name="" pattern="^[a-z]{4}-[a-z]{4}-[a-z]{4}-[a-z]{4}$" />
    <br/>
    <input type="submit" value="Send" />
</form>

JavaScript

var formElement = document.querySelector('form');

console.log(formElement.checkValidity());
console.log(formElement.email.checkValidity());
console.log(formElement.url.willValidate);
console.log(formElement.url.validity);
console.log(formElement.url.validationMessage);
formElement.url.setCustomValidity('Curstom message');