JSFiddle - React, Tailwind, and code Playground

by edaloicaro18

HTML

<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/1.8.7/themes/redmond/jquery.ui.all.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
 <form id="form1" name="form1" method="get" action="">
        <fieldset  style="width: 85%">
            <legend>MASTER</legend>
            <table width="90%" align="center">             
                <tr>
                    <td align="left">Date</td>
                    <td align="left">
                        <input name="fecha"  id="fecha" type="text" size="10" maxlength="10" value="" class="text ui-widget-content ui-corner-all"/>
                    </td>
                    <td></td>
                </tr>
                 <tr>
                    <td align="left">Number</td>
                    <td align="left">
                        <input name="numeroDoc"  id="numeroDoc"  type="text" size="28" maxlength="10" value="" class="text ui-widget-content ui-corner-all" />
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td align="left">Serie</td>
                    <td align="left">
                        <input name="serieDoc"  id="serieDoc"  type="text" size="28" maxlength="10"  value="" class="text ui-widget-content ui-corner-all" />
                    </td>
                    <td></td>
                </tr>                
                <tr>
                    <td colspan="3" align="center">
                        <input  type="submit" id="guardar" value="Save" disabled="true" />
                        &nbsp;&nbsp;&nbsp;
                        <input type="button" id="cancelar" value="Cancel" onclick="doSubmit('menu.htm');" />
                        <button>Doesn't work</button>
                    </td>
                </tr>
            </table>            
        </fieldset>

    </form>
    <!--Detail -->
    <div class="demo">
        <fieldset style="width: 85%">
     ...

CSS

div#contenido table { margin: 1em 0; border-collapse: collapse; width: 90%;}
    div#contenido table td, div#contenido table th { border: 1px solid #eee ; padding: .6em 10px; text-align: center; }

    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }

JavaScript

$(document).ready(function(){
        $("#fecha").datepicker();      
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        var importe = $( "#importe" ),
        concepto = $( "#concepto" ),
        allFields = $( [] ).add( importe ).add( concepto ),
        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( "Longitud de " + n + " debe estar entre " +
                    min + " y " + max + "." );
                return false;
            } else {
                return true;
            }
        }
        function min( o, n, min) {
            if ( o.val()< min) {
                o.addClass( "ui-state-error" );
                updateTips( "El valor de: " + n + " debe ser mayor o igual a " +
                    min + " ." );
                return false;
            } else {
                return true;
            }
        }


        function checkRegexp( o, regexp, n ) {
            if ( !( regexp.test( o.val() ) ) ) {
                o.addClass( "ui-state-error" );
                updateTips( n );
                return false;
            } else {
                return true;
            }
        }

        $( "#formDetalle" ).dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Add Detail": function() {
                    var bValid = true;
                    allFields.removeClass( "ui-state-error" );

                    bValid = bValid && checkLength( importe, "importe", 1, 10 );
                    bValid = bValid &&...