JSFiddle - React, Tailwind, and code Playground

by barrycorrigan

HTML

<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<form action="#" id='commentForm'>
    <input type="text" name="a" id="a">
    <input type="text" name="b" id="b">
    <button type="submit">Validate!</button>
<div id="date" style="border:1px solid blue;"></div>
<div id="name" style="border:1px solid red;"></div>
</form>

CSS

.valid {
    background-color: #000000;
}

JavaScript

$('document').ready(function(){
    $('form').validate({
        rules: {
           a: {required:true, minlength:2},
           b: {required:true}
        },      
        messages: {
           a: {required: "enter your name!"},
           b: {required: "enter the date!"}                        
        },
        errorPlacement: function(error, element) {
        if(element.attr('name') == 'a'){
             $('#name').html(error);                
         }
         if(element.attr('name') == 'b'){
             $('#date').html(error);                
         }
        },
        success: function(label){
            label.addClass("valid").text("Ok!");                  
        },
        debug:true
    });
    $('#a').blur(function(){
        $("form").validate().element("#a");
    });
});