JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<div class="TabBody">
    
<h1>jQuery Live Form Validation Advanced Demo</h1>

    <form action="" method="post" class="AdvancedForm">
        <table cellpadding="3" cellspacing="2">
            <tr>
                <td>Enter a Required Field</td>
                <td>
                    <input type="text" name="ValidField" id="ValidField" />
                </td>
            </tr>
            <tr>
                <td>Enter a Number</td>
                <td>
                    <input type="text" name="ValidNumber" id="ValidNumber" />
                </td>
            </tr>
            <tr>
                <td>Enter an Integer</td>
                <td>
                    <input type="text" name="ValidInteger" id="ValidInteger" />
                </td>
            </tr>
            <tr>
                <td>Make a selection</td>
                <td>
                    <select name="ValidSelection" id="ValidSelection">
                        <option value="0">Make a Selection</option>
                        <option value="Option 1">Option 1</option>
                        <option value="Option 2">Option 2</option>
                        <option value="Option 3">Option 3</option>
                        <option value="Option 4">Option 4</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Select a Radio Button</td>
                <td> <span id="ValidRadio" class="InputGroup">
<label for="ValidRadio_1">
<input type="radio" name="ValidRadio" id="ValidRadio_1" value="1" />Radio Button 1
</label><br/>
<label for="ValidRadio_2">
<input type="radio" name="ValidRadio" id="ValidRadio_2" value="2" />Radio Button 2
</label><br/>
<label for="ValidRadio_3">
<input type="radio" name="ValidRadio" id="ValidRadio_3" value="3" />Radio Button 3
</label><br/>
<label for="ValidRadio_4">
<input type="radio" name="ValidRadio" id="ValidRadio_4" value="4" />Radio Button 4
</label></span>

                </td>
           ...

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 20px;
}
h1 {
    margin: 0px 0px 10px;
    font-size: 22px;
}
.Tabs {
    margin-bottom: -1px;
    padding: 3px 10px 0px 10px;
}
.Tabs a {
    border: 1px solid #AAA;
    display: inline-block;
    padding: 3px 15px;
    text-decoration: none;
    color: #333;
    background: #F5F5F5;
    border-radius: 8px 8px 0px 0px;
    -moz-border-radius: 8px 8px 0px 0px;
}
.Tabs a:hover {
    background: #F7F7F7;
    color: #555;
}
.Tabs a.Active {
    border: 1px solid #888;
    background: #FFF;
    border-bottom: 1px solid #FFF;
}
.TabBody {
    border: 1px solid #888;
    padding: 20px;
    border-radius: 8px;
    -moz-border-radius: 8px;
}
.ValidXHTML {
    text-align: right;
}
input, select {
    border: 1px solid #888;
    background: #ffffff;
    padding: 3px 4px;
    color: #222;
    margin: 0px 5px 0px 0px;
    border-radius: 7px;
    -moz-border-radius: 7px;
}
input:focus, select:focus {
    outline: none;
}
.InputGroup {
    display: inline-block;
    padding: 3px 4px;
    border: 1px solid #FFF;
    border-radius: 7px;
    -moz-border-radius: 7px;
}
.ErrorField {
    border-color: #D00;
    color: #D00;
    background: #FFFFFE;
}
span.ValidationErrors {
    display: inline-block;
    font-size: 12px;
    color: #D00;
    padding-left: 10px;
    font-style: italic;
}

JavaScript

(function (jQuery) {
    var ValidationErrors = new Array();
    jQuery.fn.validate = function (options) {
        options = jQuery.extend({
            expression: "return true;",
            message: "",
            error_class: "ValidationErrors",
            error_field_class: "ErrorField",
            live: true
        }, options);
        var SelfID = jQuery(this).attr("id");
        var unix_time = new Date();
        unix_time = parseInt(unix_time.getTime() / 1000);
        if (!jQuery(this).parents('form:first').attr("id")) {
            jQuery(this).parents('form:first').attr("id", "Form_" + unix_time);
        }
        var FormID = jQuery(this).parents('form:first').attr("id");
        if (!((typeof (ValidationErrors[FormID]) == 'object') && (ValidationErrors[FormID] instanceof Array))) {
            ValidationErrors[FormID] = new Array();
        }
        if (options['live']) {
            if (jQuery(this).find('input').length > 0) {
                jQuery(this).find('input').bind('blur', function () {
                    if (validate_field("#" + SelfID, options)) {
                        if (options.callback_success) options.callback_success(this);
                    } else {
                        if (options.callback_failure) options.callback_failure(this);
                    }
                });
                jQuery(this).find('input').bind('focus keypress click', function () {
                    jQuery("#" + SelfID).next('.' + options['error_class']).remove();
                    jQuery("#" + SelfID).removeClass(options['error_field_class']);
                });
            } else {
                jQuery(this).bind('blur', function () {
                    validate_field(this);
                });
                jQuery(this).bind('focus keypress', function () {
                    jQuery(this).next('.' + options['error_class']).fadeOut("fast", function () {
                        jQuery(this).remove();
                    });
      ...