JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<form name="form-core" id="form-core" method="post" action="" role="search" ct-type="basicSearch" novalidate="novalidate">
<label for="keywords">Hello</label>
<input type="text" id="keyword" name="keyword" class="required" />
<span class="error-message-required">Ce champ est obligatoire</span>
<input type="submit" /><input class="cancel" type="submit" value="Reset" />
</form>
CSS
.error-message-required { display : none; }
JavaScript
$(document).ready(function() {
$('#form-core').validate({
debug: false,
onfocusout: function (element) { jQuery(element).valid() },
errorElement: "div",
errorPlacement: function (error, element) {
jQuery('div[for=' + error.attr('for') + ']').remove();
error.text($(element).next('.error-message-required').text());
error.insertBefore(element);
}
});
});