JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
  <form id="form1" runat="server">
    <h3 style="color: Olive">
        ADD NEW USER BELOW
    </h3>
    <table>
        <tr>
            <td colspan="2">
                <div id="errMsg" class="errMsg">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <asp:HiddenField ID="hdField" runat="server" />
            </td>
        </tr>
        <tr>
            <td style="font-size: large">
                Name:
            </td>
            <td>
                <input ID="txtName" name="txtName" runat="server" type="text" Width="120px"></input>
            </td>
        </tr>
        <tr>
            <td style="font-size: large">
                SurName:
            </td>
            <td>
                                <input ID="txtSurName" name="txtSurName" runat="server" type="text" Width="120px"></input>
            </td>
        </tr>
        <tr>
            <td style="font-size: large">
                Email:
            </td>
            <td>
                                <input ID="txtEmail" name="txtEmail" runat="server" type="text" Width="120px"></input>
            </td>
        </tr>
        <tr>
            <td style="font-size: large">
                Mobile:
            </td>
            <td>
                                <input ID="txtMobile" name="txtMobile" runat="server" type="text" Width="120px"></input>
            </td>
        </tr>
        <tr>
            <td style="font-size: large">
                Address:
            </td>
            <td>
                                <input ID="txtAddress" name="txtAddress" runat="server" type="text" Width="120px"></input>
            </td>
        </tr>
        <tr>
            <td>
                <input id="btnSave" runat="server" title="Save" type="button" 
                   ...

CSS

#field

{

    margin-left: .5em;

    float: right;

}

#field, label

{

    float:left;

    font-family: Arial, Helvetica, sans-serif;

    font-size: small;
    
}

br

{

    clear: both;

}

input

{

    border: 1px solid black;

    margin-bottom: .5em;
    width: 72px;
}

input.error

{

    border: 1px solid red;

}

label.error

{

    
    position:fixed;
    
    Background-image:url("../images/unchecked.jpg");
    
    background-repeat:no-repeat;

    padding-left: 20px; 

    margin-left: .3em;

    vertical-align:middle;

    background-color: #FFEBE8;  

    border: solid 1px red;

    width:210px;
    
    height:15px;

}

label.valid

{

    position:absolute;

    Background-image:url("../images/checked.gif") ;
    
    background-repeat:no-repeat;

    padding-left: 20px; 

    margin-left: .3em;

    vertical-align:top;

    background-color:White;

    border:none;

    width:1px;

    height: 16px;

}

JavaScript

$(document).ready(function () {

        $.validator.addMethod("MobileIND", function (value, element) {

            return /[789]\d{9}$/.test(value);

        });

        $("#form1").validate({

            rules: {

                txtName: {

                    required: true

                },
                txtSurName: {
                    required: true

                },

                txtEmail: {
                    required: true,
                    email: true

                },
                txtMobile: {
                    required: true,
                    MobileIND:true
                },

                txtAddress: {

                    required: true
                }
            },

            messages: {

                txtName: {

                    required: "Field should not be empty"
                },
                txtSurName: {
                    required: "Field Should not be empty"

                },
                txtEmail: {
                    required: "Field should not be empty",
                    Email: " Please enter a valid Email"

                },
                txtMobile: {
                MobileIND: "Enter Indian Mobile Number",
                    required: "Field should not be empty"
                    

                },
                txtAddress: {
                required:"Field should not be empty"
                
                }

            },


            submitHandler: function (form) {

                var txtName = $("#txtName").val();
                var txtEmail = $("#txtEmail").val();
                var txtSurName = $("#txtSurName").val();
                var txtMobile = $("#txtMobile").val();
                var txtAddress = $("#txtAddress").val();
                 
            //  CheckUser();
                $.ajax({
                    type: "POST",
                    url: location.pathname + "/saveData",
                    data: "{Name:'" + txtName + "',SurName:'" +...