JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<form name="form1" method="post" action="index.aspx" id="form1">
    <div>
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEzNjkxMzkwNjRkZA5cKVQaXYT4tn+yWAqSzKFUlU/n" />

    </div>
    <div>
        <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKDodaQAwLEhISFCwKE8/26DAKlqcn3CorVRe6GNBRLx2dxjYtOmjSWAJ9c" />
    </div>
    <div>
        <span id="lblName">Name</span>
        <br />
        <input name="txtName" type="text" id="txtName" />
        <br />
        <br />
        <span id="lblEmail">Email</span>
        <br />
        <input name="txtEmail" type="text" id="txtEmail" class="required email" />
        <br />
        <br />
        <input type="submit" name="btn_SubmitData" value="Submit" id="btn_SubmitData" />
    </div>
</form>

CSS

label.error {
    color: red;
    /*display: none !important;*/
}
input.error { 
    border: 1px dotted red; 
    background: orange; 
}

#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
    margin-left: 10px;
    width: auto;
    display: inline;
}
#newsletter_topics label.error {
    display: none;
    margin-left: 103px;
}
body, div { font-family: 'lucida grande', helvetica, verdana, arial, sans-serif }
body { margin: 0; padding: 0; font-size: small; color: #333 }
h1, h2 { font-family: 'trebuchet ms', verdana, arial; padding: 10px; margin: 0 }
h1 { font-size: large }
#main { padding: 1em; }
#banner { padding: 15px; background-color: #06b; color: white; font-size: large; border-bottom: 1px solid #ccc;
    background: url(../images/bg.gif) repeat-x; text-align: center }
#banner a { color: white; }
    
p { margin: 10px 0; }

li { margin-left: 10px; }

h3 { margin: 1em 0 0; }

h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }

JavaScript

$(function() {
    // validate the comment form when it is submitted
    $("#form1").validate({
        debug: true,
        messages: {
            txtEmail: "Please enter a valid email"
        },
        showErrors: function() { 
            //this.defaultShowErrors(); 
        },
        highlight: function(input) {
            $(input).addClass("input-highlight");
        },
        unhighlight: function(input) {
            $(input).removeClass("input-highlight");
        },
        invalidHandler: function(ev, validator) {
            var form = ev.target;
            $(form).find('input.error').each(function(i, em) {
                $(em).css('background-color','#F00');
            });
        }
        
    });

});