JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<div data-role="page">
    <div data-role="header" data-theme="e">
         <h3>PRAYERS APP</h3>

    </div>
    <div data-role="content">
        <div class="center-wrapper"> <a href="#login_box" id="showdialog" data-transition="pop" data-rel="dialog" data-role="button" data-icon="plus" data-theme="e">USER LOGIN AREA</a>

        </div>
    </div>
</div>
<div data-role="dialog" id="login_box" class="login-popup" data-dismissible="false">
<a href="#" id="closeBtn" class="ui-btn-right" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext">close btn</a> 
    <div data-role="content">
        <div class="ui-body ui-body-b">
            <form name="login" id="formlogin" method="get" action="" accept-charset="utf-8">
                <div data-role="fieldcontain">
                    <label for="username">USER NAME:</label>
                    <br/>
                    <input type="text" name="username" id="usrname" placeholder="your name" />
                    <br/>
                </div>
                <div data-role="fieldcontain">
                    <label for="password">PASSWORD:</label>
                    <br/>
                    <input type="password" name="password" id="usrpswd" placeholder="please enter your password" />
                    <br/>
                </div>
                <fieldset class="ui-grid-a">
                    <div class="ui-block-a"> <a href="#" id="signinbtn" data-role="button" data-theme="b" data-icon="check" style="text-align:center; float:right;">SIGN  IN</a>

                    </div>
                    <br/><br/><br/>
                    <input type="submit" />
                </fieldset>
            </form>
        </div>
    </div>
</div>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation"...

CSS

#docs {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
}

JavaScript

$(document).ready(function () {
    
    $('#formlogin').validate({
        rules: {
            username: {
                required: true,
                minlength: 4
            },
            password: {
                required: true,
                minlength: 8
            }
        },
        messages: {
            username: {
                required: "pls enter user name",
                minlength: $.format("Keep typing, at least {0} characters required!")
            },
            password: {
                required: "pls enter password",
                minlength: $.format("password should be atleast {0} characters")
            }

        }
    });
    
});