JSFiddle - React, Tailwind, and code Playground

by paragr

HTML

<div class="demo">

<div id="dialog-form" title="Login">
    <p class="validateTips">All form fields are required.</p>

    <form id='frm_login' name="frm_login" action="login.php" method="post">
    <div  id="lbl_status" ></div>
    <fieldset>
        <label for="aname">Name</label>
        <input type="text" name="aname" id="aname" class="text ui-widget-content ui-corner-all" />
        <label for="apass">Password</label>
        <input type="password" name="apass" id="apass" value="" class="text ui-widget-content ui-corner-all" />
             
    </fieldset>
    </form>
</div>





</div><!-- End demo -->

CSS

<link type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />


<style type="text/css">
        
        
        input.text { margin-bottom:12px; width:95%; padding: .4em; }
        fieldset { padding:0; border:0; margin-top:25px; }
        h1 { font-size: 1.2em; margin: .6em 0; }
        div#users-contain { width: 350px; margin: 20px 0; }
        div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
        div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
        .ui-dialog .ui-state-error { padding: .3em; }
        .validateTips { border: 1px solid transparent; padding: 0.3em; }
        
    </style>


<link type="text/css" href="demos.css" rel="stylesheet" />

JavaScript

<script type="text/javascript" src="jquery-1.4.1.js"></script>
    <script type="text/javascript" src="external/jquery.bgiframe-2.1.1.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.button.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.draggable.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.position.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.resizable.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.dialog.js"></script>
    <script type="text/javascript" src="ui/jquery.effects.core.js"></script>
   
   
    <script type="text/javascript">
    
    
    
    
    
    
    
    
    
    


    
    
    
    
    
    
    
    
    
    
    $(function() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $("#dialog").dialog("destroy");
        
        var aname = $("#aname"),
            apass = $("#apass"),
            
            allFields = $([]).add(aname).add(apass),
            tips = $(".validateTips");

        function updateTips(t) {
            tips
                .text(t)
                .addClass('ui-state-highlight');
            setTimeout(function() {
                tips.removeClass('ui-state-highlight', 1500);
            }, 500);
        }

        function checkLength(o,n,min,max) {

            if ( o.val().length > max || o.val().length < min ) {
                o.addClass('ui-state-error');
                updateTips("Length of " + n + " must be between "+min+" and "+max+".");
                return false;
            } else {
                return true;
            }

        }
        
        
        function chklg(unm, ups)//function to check if username...