JSFiddle - React, Tailwind, and code Playground

by Tushar Gupta

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css">
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form id="form1">
    <div data-role="page" id="home" data-theme="b">
        <div data-role="header">
             <h2>Get Update</h2>

        </div>
        <div data-role="content">
            <div data-role="fieldcontainer">
                <label for="fname" data-theme="d">First Name:</label>
                <input type="text" id="fname" name="fname" data-theme="d" placeholder="Enter First Name">
                <br />
            </div>
            <div data-role="fieldcontainer">
                <label for="lname" data-theme="d">Last Name:</label>
                <input type="text" id="lname" name="lname" data-theme="d" placeholder="Enter Last Name">
            </div>
            <div data-role="fieldcontainer">
                <label for="email" data-theme="d">E-mail Address:</label>
                <input type="email" id="email" name="email" data-theme="d" placeholder="Enter Email">
            </div>
        </div>
        <div data-role="footer" class="ui-bar">
            <table style="width:100%">
                <tr>
                    <td style="width:30%">
                        <input type="button" data-icon="delete" value="Cancel" id="cancel">
                    </td>
                    <td style="width:30%">
                        <input type="submit" data-icon="check" value="Submit" id="submit">
                    </td>
                </tr>
            </table>
        </div>
    </div>
</form>
<form id="form2">
    <div data-role="page" id="success" data-theme="b">
        <div data-role="header">
             <h2>Thank You !!!</h2>

        </div>
    </div>
</form>

CSS

.error{
    color:red;
    display:block;
}

JavaScript

$('#form1').validate({
    rules: {
        fname: {
            required: true
        },
        lname: {
            required: true
        },
        email: {
            required: true
        }
    },
    messages: {
        fname: {
            required: "Please enter your first name."
        },
        lname: {
            required: "Please enter your last name."
        },
        lname: {
            required: "Please enter your email."
        }
    },
    errorPlacement: function (error, element) {
        error.appendTo(element.parent().prev());
    },
    submitHandler: function (form) {
        $.mobile.changePage('#success', {
            transition: "slide"
        });
        return false;
    }
});