JSFiddle - React, Tailwind, and code Playground

by dmayley

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">

        <script src="https://jqueryvalidation.org/files/lib/jquery.js"></script>
        <script src="https://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
        <script src="https://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
  
    <script>

        $(document).ready(function () {
            $("#myForm").validate();
        });

    </script>

</head>

<body bgcolor="white">

    <center>
        <form id="myForm" action="/SubmitSuccess.html">

            <label>Input Number: </label>
            <input type="text" name="input_number" data-rule-required="true" data-msg-required="Required field.  Please enter 6 digits" size=10 maxlength=10 pattern="[0-9]{6}" data-msg-pattern="Please enter 6 digits"  />

            <br>

            <label>Input Alpha: </label>
            <input type="text" name="input_alpha" id="input_alpha" data-rule-required="true" data-msg-required="Required field. Please enter 6 uppercase characters" size=10 maxlength=10 pattern="[A-Z]{6}" data-msg-pattern="Must be 6 uppercase characters." />

            <br><br>
            
            Click Submit when complete<br>

            <input type="submit" name="SUBMIT" value="SUBMIT" />

        </form>
    </center>

</body>

CSS

label.error {
            display: block;
            float: none;
            color: red;
        }

        input {	border: 1px solid black; }
        input:focus { border: 1px solid black; }
        input.error { border: 1px solid red; }