JSFiddle - React, Tailwind, and code Playground

by Thet Hlaing

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css">
 <span class="label"> Date of Birth</span> <span>:  <input type="text" value="" id="txtDOB" name="dob"></span> <br/>
       <span class="label"> Pregnant</span> <span>: <input type="radio" name="pregnant" value="yes">Yes &nbsp;
<input type="radio" name="pregnant" value="no">No </span> <br/>
        <span class="label"> Estimated Delivery Date</span> <span>: <input type="text" value="" id="txtEDD" name="edd"></span> <br/>
<span class="label"> Email Address</span> <span>: <input type="text" value="" id="txtEmail" name="email"></span><span id="errorMessage"></span> <br/>
        <input type='submit' value="Submit" id="formSubmit" />

CSS

.label{
    display:inline-block;
    width:250px;    
}

#errorMessage{color:Red;}

JavaScript

$("#txtDOB").datepicker({
    defaultDate: "-20y" 
  
});

$("#txtEDD").datepicker({
    minDate: 0
    });


$("#formSubmit").click(function() {
    var x = document.getElementById('txtEmail').value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length) {
        $("#errorMessage").text("Not a valid e-mail address");
        return false;
    }
    else
    {
         $("#errorMessage").text("");
    }
});