JSFiddle - React, Tailwind, and code Playground
by reporter
HTML
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
validationRules = {
"questions[1].answer": {required:true},
"questions[0].answer": {required:true}
},
validationMessages = {
"questions[1].answer": "Please select car registered under your name",
"questions[0].answer": "Please select your residential street"
};
$("#identityVerification").validate(
{
rules: validationRules,
messages: validationMessages,
highlight: function(element)
{
var id = element.id, errorElement = $("#err_" + id), errorContainer = errorElement.closest("div.error-message");
$(element).addClass("error-message");
errorContainer.show();
},
unhighlight: function(element)
{
var id = element.id;
$(element).removeClass("error-message");
},
success: function(errorElement)
{
var errorContainer = errorElement.closest("div.error-message");
if (errorContainer.find("span:visible").length == 0) errorContainer.hide();
},
errorElement: "span"
});
});
</script>
</head>
<body>
<form method="post" id="identityVerification">
<div class="error-message" id="error-message1" style="display:none;">
<p id="err_cars" style="font-size:13px;"></p>
<p id="err_street" style="font-size:13px;"></p>
</div>
<br />
<div>
<p...