JSFiddle - React, Tailwind, and code Playground

by Viruthagiri

HTML

<form onSubmit='validate(); return false;'>
  <p>Enter an email address:</p>
  <input id='email'>
  <button type='submit' id='validate'>Validate!</button>
  </form>
  
  <br/>
  <h2 id='result'></h2>

CSS

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }

JavaScript

function validateEmail(email) { 
    var reg = JSON.parse('{"regex":"/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/"}');
    var re = reg.regex; 
    return re.test(email);
}

function validate(){
  $("#result").text("");
  var email = $("#email").val();
  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;
}

$("form").bind("submit", validate);