JSFiddle - React, Tailwind, and code Playground

by eddiarnoldo

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/redmond/jquery-ui.css">
<div id = "form" style = "padding:10px">
    <fieldset class="form-horizontal">
            <label for="name">Name:</label>
            <input id="name" type="text" class="required onlyNumbers" placeholder='Name'>
            <label for="email">Email:</label>
            <input id="email" type="text" class="required email">   
            <label for="age">Age:</label>        
            <input id="age" type="text" data-range='{"type":"date","min":"2012-02-25","max":"2012-04-15"}'>
            <label for="in">In:</label>
            <input id="in" type="text" class="required date">
            <label for="out">Out:</label>
            <input id="out" type="text" class="required" data-gt='{"ele":"in","type":"date"}' >
            <label for="prg">Number:</label>
            <select id="prg" type="text" class="required">
                <option></option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>      
            <label for="comment">Comment:</label>        
            <textarea id="comment" type="text" class="required"></textarea>
    </fieldset>
    <button id="send">Send</button>
</div>

JavaScript

/*
@name:
    jQuery ajax validation plugin. AutoZone Inc.

@Autor: Jesus Mata,
        Eduardo Quintana,
        Jorge Hernandez


@Description: 
    jQuery Plugin to validate the data from ajax

@version: SNAPSHOT 0.1.1

@requeriments:
    - jQuery 1.6.1 or Higher
    - jQuery UI 1.8.1 or Higher (for error class, the error clas could be specified) 

@changes:
-jmata: compare values support (greater than, lower than)
-

*/
function MessageBox(message, title, icon) {
    if (!icon) {
        icon = "ui-icon-info";
    }
    if (message == 'default') {
        message = "You need to select a ticket first. <br /><br /><strong>You can also double-click on a ticket <br />row to view its details.</strong>";
        title = "Select a ticket";

    }
    $("<div/>", {
        id: "__msg",
        html: "<span class='ui-icon " + icon + "' " + "style='float:left; margin:0 7px 50px 0;'></span>" + "<div style='margin: 20px 0px 0px 40px;'>" + message + "</div>",
        title: title
    }).dialog({
        modal: true,
        resizable: false,
        buttons: {
            Ok: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            $(this).dialog("destroy");
            $(this).remove();
        }
    });
}


(function($) {
    $.widget("ui.combobox", {
        // default options
        options: {
            strict: true
        },
        _create: function() {
            var input, self = this,
                select = this.element.hide(),
                selected = select.children(":selected"),
                value = selected.val() ? selected.text() : "",
                strict = this.options.strict,
                wrapper = this.wrapper = $("<span>").addClass("ui-combobox").insertAfter(select);

            input = $("<input>").appendTo(wrapper).val(value).addClass("ui-state-default ui-combobox-input").autocomplete({
                delay: 0,
                minLength: 0,
                source:...