JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.js"></script>
<form class="cmxform" id="commentForm" >
<p>
<input type="text" id="name" name="name" size="25" class="decora fieldForm" value=""/>
</p>
<p>
<label for="cemail">E-Mail<em>*</em></label></p><p>
<input type="text" id="email" name="email" size="25" class="decora fieldForm" value=""/>
</p>
<input type="submit" value="Submit">
</form>
CSS
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
#container{
height:300px;
width:500px;
}
.formObj{
/*position:relative;
margin-left: 15%;*/
}
.focusField{
border:solid 2px #73A6FF;
background:#EFF5FF;
color:#000;
}
.idleField{
background:white;
color: #6F6F6F;
border: solid 2px #DFDFDF;
}
#status{
width:50%;
padding:10px;
outline:none;
height:36px;
}
.loadingClass{
position:absolute;
width:250px;
height:200px;
left:300px;
top:180px;
z-index:1;
background-color: #6B718B;
font:40px Arial, Helvetica, sans-serif;
color:#ffffff;
padding:20px;
}
.submitDim{
width:300px;height:40px;
}
.fieldForm{
width:300px;
}
.submitIdle{
-webkit-border-radius: 99px;-moz-border-radius: 99px;border-radius: 99px;border:10px solid #DFDFDF;background-color:#6F6F6F;-webkit-box-shadow: #B3B3B3 99px 99px 99px;-moz-box-shadow: #B3B3B3 99px 99px 99px; box-shadow: #B3B3B3 99px 99px 99px;
color: white;
}
.submitFocus{
-webkit-border-radius: 99px;-moz-border-radius: 99px;border-radius: 99px;border:10px solid #DFDFDF;background-color:#EFF5FF;-webkit-box-shadow: #B3B3B3 99px 99px 99px;-moz-box-shadow: #B3B3B3 99px 99px 99px; box-shadow: #B3B3B3 99px 99px 99px;
color: black;
}
/*div contenente i messaggi di errore validazione*/
.error {
color: red;
font-size:12px;
}
.trattDati{
font-size:10px;
}
JavaScript
$("form").validate({
rules: {
name: {
required: true
},
},
errorPlacement: function(error, element) {
if (element.attr("name") == "name")
error.insertAfter(email)
},
});