JSFiddle - React, Tailwind, and code Playground

by Amin Pourhadi

HTML

<body class="inSysIFrame" id="inSysIFrame" style="display:none;">
    <br>
        <table cellpadding="0" cellspacing="1" align="center" bgcolor="white" border="0">
            <tr>
                <td>
                    <div style="height:257px; width:100%; overflow-x:hidden; overflow-y:scroll;">
                        <form>
                            <table height="25">
                                <tr>
                                    <td>&nbsp;</td>
                                </tr>
                            </table>
                            <table height="25">
                                <tr>
                                    <td class="formLabel" width="130">Sys ID</td>
                                    <td class="formInput rtl" style="width:50px; background-color:#fff; color:red; border:none;">1</td>
                                    <td width="202px"></td>
                                    <td class="formLabel" width="130">Version</td>
                                    <td class="formInput req" style="width:50px;">
                                        <input class="formInput req" style="border:none; width:50px;" type="text" id="sysversion" value="12" pattern="[0-9][0-9].[0-9][0-9]"/>
                                    </td>
                                </tr>
                            </table>
                            <table height="25">
                                <tr>
                                    <td class="formLabel" width="130">Sys Name</td>
                                    <td class="formInput rtl req" style="width:200px;">
                                        <input class="formInput rtl req" style="border:none; width:200px;" type="text" id="sysname" value="Payroll" pattern="[^\u0000-\u0080]+"/>
                                    </td>
                                    <td width="50px"></td>
                                    <td class="formLabel" width="130">About</td>
               ...

CSS

@charset "UTF-8";

html {
  margin: 0px 0px;
  padding: 0px;
  overflow: hidden;
}

body
{
  margin: 0px;
  padding: 0px;
  background-color: #000;
  font: normal 14px tahoma;
  direction: rtl;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

input:focus , a:focus
{
  outline: none;
}

input:required:invalid
{
  box-shadow: none;
}

.rtl input:required:invalid
{
  box-shadow: none;
}

.inSysIFrame
{
  background-color: transparent;
}

.formLabel
{
  font: normal 13px tahoma;
  padding: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  display: inline-block;
}

.formInput
{
  font: normal 14px courier;
  padding: 0px;
  border: 1px solid black;
  background-color: #4269B3;
  color: #fff;
  direction: ltr;
}

.formInput input:invalid
{
  box-shadow: none;
  color: yellow;
}

.footer-lnk
{
  border: 0px;
  padding: 0px 0px;
  margin: 0px;
  font: bold 13px tahoma;
  color: #fff;
  vertical-align: middle;
  cursor: pointe;
}

.dgFooter
{
  background: #4269B3;
  font: bold 12px tahoma;
  color: #fff;
  border: none;
  vertical-align: top;
}

JavaScript

function sysChkValidInput() {
	var fields = document.querySelectorAll("input");
	var invalid = document.querySelectorAll(":invalid");
	alert(invalid.length);
	for (var i = 0, len = fields.length; i < len; i++) {
		var thisId = fields[i].id;
		var s = "<div class='results'>Validity for " + thisId;
		s += "<table>";
		//first, call checkValidity as a whole
		s += "<tr><td><b>VALID:</b></td><td>" + fields[i].checkValidity() + "</td></tr>";
		for (prop in fields[i].validity) {
			s += "<tr><td>" + prop + "</td><td>" + fields[i].validity[prop] + "</td></tr>";
		}
		s += "</table></div>";
		fields[i].insertAdjacentHTML("afterend", s);
	}
}

$(".rtl").css("direction", "rtl");
$("#inSysIFrame").fadeIn(1000, "linear").promise().done(function() {
	$(".req").attr("required", "required");
	$("input:first").focus();
	$("input:text").focus(function() {
		this.preventDefault();
	});
	$("input:text").bind("keydown", function(e) {
		whatKey = (e.keyCode || e.which);
		if (whatKey == 9 || whatKey == 13 || whatKey == 40 || whatKey == 38) {
			e.preventDefault();
			var nextIndex = $("input:text").index(this) + (whatKey == 38 ? -1 : 1);
			nextIndex = nextIndex == -1 ? $("input:text").length - 1 : nextIndex == $("input:text").length ? 0 : nextIndex;
			$("input:text")[nextIndex].focus();
		}
	});
	$("#sysEditIcon").mouseover(function() { sysChkValidInput(); });
});