JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>
<form id="form1" name="login" action="Index_subpage.html" >
<div id="errbox" style="display: none"></div><br />
<div class="loginpanel">
<div>
<input type="text" id="username" name="username" class="input-text" placeholder="[email protected]"/><br/><br/>
<input type="password" id="password" name="password" class="input-text" placeholder="password"/>
<div class="help_icon"><a href="forgot_password.html"><img src="Images/help-icon.png" /></a></div><br/><br/>
<input type="submit" id="submit" value="Submit" class="submit-button" />
</div>
</div>
</form>
CSS
#errbox {border: 1px solid #f00; width:240px;margin:0px auto;padding-left:10px;}
label.error {padding-left: .3em; color: #f00;}
input.error {border: 1px solid #a00}
JavaScript
$(document).ready(function () {
$('#form1').attr("placeholder", "This input has an error");
$("#input-text").validate({
debug: false,
errorClass: "error error_red",
rules: {
username: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
}
},
messages: {
username: "Please enter a valid email address",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
}
},
invalidHandler: function(form, validator) {
// This handler will show only one error at time - the first in this instance //
var errors = validator.numberOfInvalids();
//alert("error" + errors);
if (errors) {
$("#errbox").html(validator.errorList[0].message);
$("#errbox").show();
validator.errorList[0].element.focus();
} else {
$("#errbox").hide();
}
},
errorPlacement: function(error, element) {
// Override error placement to not show error messages beside elements //
},
});
});