JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<form is="my-form">
  <input type="number" min="1" max="5" required="" data-invalid-message="1-5, fool!">
  <select required="" data-invalid-message="Select something with a value">
  </select>
</form>

JavaScript

class MyForm extends HTMLFormElement {
	connectedCallback() {
  	console.log("MyForm connectedCallback");
  	this.addEventListener("valid", this);
  	this.addEventListener("invalid", this);
  	this.addEventListener("input", this);
  	this.addEventListener("change", this);
    
  	document.addEventListener("form-ready", this);
  }
  handleEvent(e) {
  	console.log("handleEvent", e);
  	if (e.type == "input" || e.type == "change") {
      this.checkElementsValidity([e.target]);
      return;
    }
    if (e.type == "form-ready") {
    	this.checkElementsValidity(this.elements);
    }
  }
  checkElementsValidity(elems) {
  	for (let formElement of elems) {
    	console.log("check validity of formElement: ", formElement);
			let isValid = formElement.checkValidity();
      if (!isValid) {
      	formElement.setCustomValidity(formElement.dataset.invalidMessage || "Some error");
      }
      console.log("isValid?", isValid, formElement);
    }
  }
}
customElements.define("my-form", MyForm, { extends: "form"});

window.onload = () => document.dispatchEvent(new CustomEvent("form-ready"));