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">
    	<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" onclick="return  valid();" />
            </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");
            $('#name1').html("");
        }
    });


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

        }
    });

    $("#phone").blur(function () {
        if (this.value.trim().length == 0) {
            $('#phone').val("Phone number");
            $('#phone').addClass("error");
        } else {
            $("#phone").removeClass("error");
            $('#phone1').html("");
        }
    });


    $("#message").blur(function () {
        if (this.value == 0) {

            $('#message').val("Message is required");
            $("#message").addClass("error");
        } else {
            $("#message").removeClass("error");
            $('#message1').html("");
        }
    });

});



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;
}