JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<p>Enter an email address:</p>
  <input id='email'>
  <button type='submit' id='validate'>Validate!</button>
  
  <h2 id='result'></h2>

JavaScript

function validateEmail(email) {
  const re = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
  return re.test(email);
}

function validate() {
  const $result = $("#result");
  const email = $("#email").val();
  $result.text("");

  if (validateEmail(email)) {
    $result.text(email + " is valid :)");
    $result.css("color", "green");
  } else {
    $result.text(email + " is not valid :(");
    $result.css("color", "red");
  }
  return false;
}

$("#validate").on("click", validate);