JSFiddle - React, Tailwind, and code Playground

by kimiliini

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" value="Save" />
                <input id="btnUpdate" runat="server" title="Update" value="Update" type="button" onclick="UpdateData()" style="display: none" />
            </td>
            <td></td>
        </tr>
    </table>
    <table>
        <tr>
   ...

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: 0 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:'" + txtSurName + "',Email:'" + txtEmail + "',Mobile:'" + txtMobile + "',Address:'" + txtAddress + "'}",
                contentType: "application/json; charset=utf-8",
                datatype: "jsondata",
                async: "true",
                success: function (response)...