JSFiddle - React, Tailwind, and code Playground

by Dragan Gaić

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="home" data-theme="b">
            <form id="form1">
                <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"/>
                    </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" data-position="fixed">
                                <input type="button" data-icon="delete" value="Cancel" id="cancel"/>    
                                <input type="submit" data-icon="check" value="Submit" id="submit"/>
                </div>
            </form>                   
        </div>
        <div data-role="page" id="success" data-theme="b">
         ...

CSS

.error {
    color:red;
}

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-pagecontainer').pagecontainer('change', '#success', {
            reload: false
        });
        return false;
    }
});