JSFiddle - React, Tailwind, and code Playground

by suraj ahir

HTML

<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<form class="contact_form" method="post" action="insert.php" onsubmit="return valid();" >
		<h4>Get a free case evaluation</h4>
		<p>Fill out the form below and Attorney Simons will review your case, personally.</p>
		<ul>
				<div style="float:left; display:inline-block; width:50%">
						<li>
								<input type="text" name="name" id="name"  placeholder="Name* "   onfocus="this.value='';"/>
								<span id="name1"></span> </li>
						<li>
								<input type="text" name="phone" id="phone"  placeholder="Phone*"  onfocus="this.value='';"/>
								<span id="phone1"></span> </li>
						<li>
								<input type="text" name="email"  id="email" placeholder="Email*" onfocus="this.value='';"/>
								<span id="email1"></span> </li>
				</div>
				<div style="float:right; display:inline-block; width:50%; padding-left:12px">
						<li>
								<textarea  rows="5" cols="20" name="message" id="message" placeholder="Message*" onfocus="this.value='';"></textarea>
								<span id="message1"></span> </li>
						<li class="permahidden">
								<input type="text" name="humans" id="humans" class="humans" />
						</li>
						<li>
								<input class="sendButton" type="submit" name="Submit" value="Send"  />
						</li>
				</div>
		</ul>
</form>

CSS

.error {
	border:#F00 1px solid;
}

JavaScript

$(function() {
 
   $("#name").blur(function() {
	   
	  
     if (this.value.trim().length == 0)
	 {
       $('#name').val("Name is required");
       $("#name").addClass( "error" );
	 }
	 else
	  {
		   $("#name").removeClass( "error" );
		  
	 }
    });

 
   $("#email").blur(function() {
     if (this.value.trim().length == 0)
	 {
       $('#email').val("Email is required");
       $('#email').addClass( "error" );
	 }
	  else
	  {
		  if(validateEmail(email)==false)
			{
			   $('#email').addClass( "error" );
				return false;
			}  
			else 
			{
				 $("#email").removeClass( "error" );
				 
			}

	 }
    });
  
   $("#phone").blur(function() {
     if (this.value.trim().length == 0)
	 {
       $('#phone').val("Phone is required");
       $('#phone').addClass( "error" );
	 }
	  else
	  {
		   $("#phone").removeClass( "error" );
		  
	 }
   });
  
    
   $("#message").blur(function() {
     if (this.value== 0)
	 {
		  
        $('#message').val("Message is required"); 
        $("#message").addClass( "error" );
	 }
	  else
	  {
		   $("#message").removeClass( "error" );
		  
	 }
    });

});


	
function validateEmail(email)
{
	var re_mail = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z])+$/;
	if (!re_mail.test(email.value))
	{
		return false;
	}
	return true;
}

 
function valid(){
	
check=0;
if( $('#name').val().trim()==''|| $('#name').val().trim()=='Name is required')
{
$('#name').val("Name is required");
check=1;
$('#name').addClass( "error" );
}

if( $('#phone').val().trim()==''|| $('#phone').val().trim()=='Phone is required')
{
$('#phone').val("Phone is required");
check=1;
$('#phone').addClass( "error" );
}

if( $('#email').val().trim()==''|| $('#email').val().trim()=='Email is required')
{
$('#email').val("Email is required");
check=1;
$('#email').addClass( "error" );
}

if(validateEmail(email)==false )
{
check=1;
$('#email').addClass( "error" );
}


if( $('#message').val().trim()==''|| $('#message').val().trim()=='Message is required'...