JSFiddle - React, Tailwind, and code Playground

by godsnake

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<form name="form-core" id="form-core" method="post" action="" role="search" 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="reset" value="Reset" />
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>

CSS

.error-message-required {
    display: none;
}
#docs {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
}

JavaScript

$(document).ready(function () {

    $('#form-core').validate({
        //  debug: false, // default - not needed to declare
        onfocusout: function (element) {
            jQuery(element).valid()
        },
        errorElement: "div",
        errorPlacement: function (error, element) {
            error.insertBefore(element);
        },
        // submit handler for demo
        submitHandler: function (form) {
            alert('valid form submitted'); // for demo
        
        }
    });

    $('#form-core input[type="text"]').each(function () {
        $(this).rules('add', {
            messages: {
                required: $(this).next('.error-message-required').text()
            }
        });
    });

});