JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<form id="validationForm" method="post">
        <table class="editorsTable standard-grid">
		    <tr>
			    <td class='mr10'>
				    <b>Text Editor</b>
				    <br />
				    <input type="text" id="textEditor" dir="rtl" ></input>
			    </td>
			    <td>
				    <b>Date Picker</b>
				    <br />
				    <input id="datePicker" type="text" dir="rtl" ></input>
			    </td>
		    </tr>
		    <tr>
			    <td class='mr10'>
				    <b>Mask: (000) 000-0000</b>
				    <br />
				    <input type="text" id="maskEditor1" dir="rtl" ></input>
			    </td>
			    <td>
				    <b>Mask: CCCCCCCCCC</b>
				    <br />
				    <input id="maskEditor2" type="text" dir="rtl" ></input>
			    </td>
		    </tr>
		    <tr>
			    <td class='mr10'>
				    <b>Numeric (signed byte)</b>
				    <br />
				    <input type="text" id="numericEditor" dir="rtl" ></input>
			    </td>
			    <td>
				    <b>Currency, range: 5..500</b>
				    <br />
				    <input id="currencyEditor" type="text" dir="rtl" ></input>
			    </td>
		    </tr>
		    <tr>
			    <td>
				    <b>Date: 1/1/1900..12/31/2200</b>
				    <br />
				    <input type="text" id="dateEditor" dir="rtl" ></input>
			    </td>
			    <td>&nbsp;</td>
		    </tr>
	    </table>
							
		<div class="buttons">
			<div>
				<input type="submit" class="required" value="Submit"...

CSS

.standard-grid {
            margin-bottom: 20px;
        }

        .mr10 {
            margin-right: 10px;
        }

        .standard-grid {
            position: relative;
            width: 500px;
            margin-left: -250px;
            left: 50%;
        }

        .standard-grid td {
            float:left;
            width: 50%;
            margin: 0;
            padding: 0;
            border: none;
        }

        #submitEvent, #formSubmit {
            float: left;
            margin-right: 20px;
        }

        #formSubmit {
            float: left;
        }

        .buttons {
            position: relative;
            width: 270px;
            margin-left: -135px;
            left: 50%;
            overflow: hidden;
        }

        .buttons div {
            overflow: hidden;
        }

        @media all and (max-width: 600px) {
            .standard-grid {
                width: 220px;
                margin-left: -110px;
            }

            .standard-grid td {
                width: 100%;
            }
        }

JavaScript

$(function () {
function getShowAllErrorsOnSubmit() {
            return $('#showErrorCheckBox').is(":checked") ? true : false;
        }

        function getRequired() {
            return $('#requredCheckBox').is(":checked") ? true : false;
        }

        function getValidationOptions() {
            var validatorOptions = {};
            validatorOptions.onblur = $('#onBlurCheckBox').is(":checked");
            validatorOptions.onchange = $('#onChangeCheckBox').is(":checked");
            validatorOptions.onsubmit = $('#onSubmitCheckBox').is(":checked");
            validatorOptions.formSubmit = $('#formSubmitCheckBox').is(":checked");
            validatorOptions.keepFocus = $('#keepFocusList').val();
            validatorOptions.showIcon = $('#showIconCheckBox').is(":checked") ? true : false;
            $.ui.igValidator.defaults.showAllErrorsOnSubmit = getShowAllErrorsOnSubmit();
            return validatorOptions;
        }

        function getErrorMessage() {
            var message = $('#customErrorMessegeText').val();
            return (message.length < 1) ? null : message;
        }

        $(function () {

            $.ui.igValidator.defaults.showAllErrorsOnSubmit = getShowAllErrorsOnSubmit();
            $('#textEditor').igEditor({
                validatorOptions: getValidationOptions(),
                required: getRequired(),
                width: 195
            });
            $('#datePicker').igDatePicker({
                width: 195,
                dateInputFormat: 'dateTime',
                nullText: 'Enter date',
                required: getRequired(),
                validatorOptions: getValidationOptions()
            });
            $('#maskEditor1').igMaskEditor({
                validatorOptions: getValidationOptions(),
                required: getRequired(),
                width: 195,
                inputMask: '(000) 000-0000'
            });
            $('#maskEditor2').igMaskEditor({
               ...