JSFiddle - React, Tailwind, and code Playground

by Michał Załęcki

HTML

<form id="signup" noValidate>
  <input name="email" type="email" required>
  <input name="password" minlength="8" type="password" required>
  <input type="submit">
</form>

Babel + JSX

console.clear();

class Form {
	constructor(selector) {
  	this.form = document.querySelector(selector);
  	this.form.addEventListener("submit", ::this.handleSubmit);
  }
  
  handleSubmit(e) {
  	e.preventDefault();
  }
  
  isValid() {
  	return this.form.checkValidity();
  }
  
 	gatherData() {
    return Array.from(this.form.elements)
      .filter(({ name }) => name)
      .reduce((akk, input) =>
        ({...akk, [input.name]: input.value}), {});
  }
  
  gatherErrors() {
    return Array.from(this.form.elements)
      .filter(input => input.name && input.validationMessage)
      .reduce((akk, input) =>
        ({...akk, [input.name]: input.validationMessage}), {});
  }
}

class SignupForm extends Form {
	handleSubmit(e) {
    super.handleSubmit(e);
    if (this.isValid()) {
      console.log(this.gatherData());
    } else {
      console.warn(this.gatherErrors())
    }
  }
}

new SignupForm("#signup");