JSFiddle - React, Tailwind, and code Playground

by vicky081

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form method="POST" action="/hourtable/" class="form-horizontal" id= "hour_form"  name="hourform" enctype="multipart/form-data">
<input type="text" id="id_dateDue" class="input-xlarge" name="date" />
<input type="text"  class="input-xlarge" name="appid" value="{{gethours}}" />
<input type="text"  class="input-xlarge" name="hours" value="" />
<button class="btn btn-gebo" type="submit" name="asubmit">Submit</button>

JavaScript

$(document).ready(function(){

                //* validation
                $('#hour_form').validate({
                    onkeyup: false,
                    errorClass: 'error',
                    validClass: 'valid',
                    rules: {
                        date: { required: true, minlength: 3 },
                        appid: { required: true, minlength: 3 },
                        hours: { required: true, minlength: 3 },
                        refund: { required: true, minlength: 3 }
                    },
                    highlight: function(element) {
                        $(element).closest('div').addClass("f_error");
                        setTimeout(function() {
                            boxHeight()
                        }, 200)
                    },
                    unhighlight: function(element) {
                        $(element).closest('div').removeClass("f_error");
                        setTimeout(function() {
                            boxHeight()
                        }, 200)
                    },
                    errorPlacement: function(error, element) {
                        $(element).closest('div').append(error);
                    }
                });


            });