JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https:////maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https:////maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<form class="form-horizontal" name="paymentInformation" id="paymentInformation" action="verifyOrder.cfm" method="post" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-4">
<input id="firstname" name="firstname" placeholder="First Name" class="form-control input-md" type="text" autofocus>
</div>
<label for="lastname" class="col-sm-2 control-label">Last Name</label>
<div class="col-sm-4">
<input id="lastname" name="lastname" placeholder="Last Name" class="form-control input-md" type="text">
</div>
</div>
<input type="submit" value="PROCEED TO THE NEXT STEP " class="blueButton">
</form>
JavaScript
$.validator.setDefaults({
errorElement: "span",
errorClass: "help-block",
highlight: function(element) {
$(element).parent().removeClass('has-success').addClass('has-error');
},
unhighlight: function(element) {
$(element).parent().removeClass('has-error').addClass('has-success');
},
errorPlacement: function (error, element) {
if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$("#paymentInformation").validate({
rules: {
'firstname': {
required: true,
minlength: 200
},
'lastname': {
required: true,
maxlength: 200
}
},
messages: {
'firstname': {
required: "Enter your First Name.",
maxlength: "Your First Name cannot exceed 200 characters"
},
'lastname': {
required: "Enter your Last Name.",
maxlength: "Your Last Name cannot exceed 200 characters"
}
}
});