JSFiddle - React, Tailwind, and code Playground

by Rohit Azad

HTML

<div id="login-print-emailer">
		                <div class="top-sec">
		                    <img height="26" width="286" alt="The Economic Times" src="http://img.etimg.com/photo/17952959.cms" />
		                </div>
		                <div class="medium-sec">
                            <p><span>Dear ET Reader,</span>Thank you for your patronage. Pleae leave your details below and we will contact you for your ET subscription.</p>
		                </div>
		                <div class="bottom-sec">
		                    <form action="#" method="post" name="" onSubmit='validate(); return false;'>
		                        <label>
		                            <input type="text" value="" name="name" id="name" placeholder="Name" />
		                        </label>
		                        <label class="">
		                            <input type="text" value="" name="emailId" id="emailId" placeholder="email Id" />
		                        </label>
		                        <label>
		                            <input type="text" value="" id="mobileNo" name="mobileNo" placeholder="Mobile No" />
		                        </label>
		                        <input type="submit" value="Submit" id="" />
		                    </form>
		                </div>
		            </div>

<div id="result"></div>

CSS

body{margin:0;padding:0;font-family:arial;font-size:13px;text-align:left;background:url("/photo/17098745.cms") repeat left top;}
                        #login-print-emailer{
                          width: 450px;
                          padding: 0;
                          border: 2px solid #ADADAD;
                          position: relative;
                          background-color: #f5f5f5;
                        }
                        .top-sec {
                          padding: 20px 20px 10px 20px;
                          text-align: center;
                        }
                        .medium-sec {
                          padding: 10px 20px 10px 20px;
                          background-color: #ccc;
                        }
                        .medium-sec p{
                              margin: 0;
                              font-size: 13px;
                              font-weight: 200;
                              line-height: 17px;
                        }
                        .medium-sec>p>span{
                            display: block;
                            font-weight: 600;
                        }
                        .bottom-sec {
                          padding: 20px 20px 20px 20px;
                          text-align: center;
                        }
                        .bottom-sec form{
                             display: inline-block;
                             vertical-align: top;
                        }
                        .bottom-sec  label{
                           display: block;
                        }
                        .bottom-sec label input{
                          font-family: arial;
                          font-size: 14px;
                          line-height: 30px;
                          display: inline-block;
                          vertical-align: top;
                          width: 263px;
                          padding: 0;
                 ...

JavaScript

$(document).ready(function(){

    
    
    function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\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,}))$/;
    return re.test(email);
}

function validate(){
  $("#result").text("");
  var email = $("#emailId").val();
  if (validateEmail(email)) {
    $("#result").text(email + " is valid :)");
    $("#result").css("color", "green");
  } else {
    $("#result").text(email + "is not valid :(");
    $("#result").css("color", "red");
  };
    
   // =====================
    var s = $('#mobileNo').val();
    alert(s);
    if (/^[0-9]{1,10}$/.test(+s) && s.length==10) {
      alert("ok");
    }else{
       alert("not");
    }
    // ======================
    
    // ===============================
    var urlParams;
(window.onpopstate = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();
    
    
    var myEmailId = urlParams.email;
    alert("My Eamil Id = "+ myEmailId);
    // ================================
  return false;
}

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