JSFiddle - React, Tailwind, and code Playground

by dzorz

HTML

<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://vitalets.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://vitalets.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">
     <form class="form-horizontal" id="gold_form" method='post' action='/start_ajax/addgold/'>
     <fieldset>
        <span class="label-f">Name</span>
        <input type="text" class="span4" id="name" name="name">
        </br>
        <span class="label-f">Date of birth</span>
        <div class="input-append date notification" id="date_birth_picker" data-date="1980-01-01" data-date-format="yyyy-mm-dd">
        <input class="span2" size="16" type="text" value="1980-01-01" readonly="" id="date_birth" name="date_birth">
        <span class="add-on"><i class="icon-th"></i></span>
        </div>
        </br>
        <button type="submit" id="submit_btn" class="btn btn-primary btn-large">Submit</button>
    </fieldset>
    </form>

CSS

@import   url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

    .error {
    float: none; color: red !important; padding-left: .5em;    
    vertical-align: top; 
    }
    .invalid {
    border: 1px solid red !important;
    }

    .success{
    border: 1px solid green !important;
    }

JavaScript

//datepicker
    $(function(){
                window.prettyPrint && prettyPrint();
                
                $('#date_birth_picker').datepicker({
                    autoclose: true,
                    weekStart: 1,
                });
                
            });


    //validation
    $().ready(function() {
                    jQuery.validator.addMethod("defaultInvalid", function(value, element){
                        switch (element.value){
                            case $(element).prop("defaultValue"):
                            if (element.name == "date_birth") return false;
                            break;
                            default: return true; 
                            break;
                            }
                            });
                            
                            
                    $("#gold_form").validate(
                        {
                        rules:{date_birth: "required defaultInvalid",
                               name: "required",
                               family_name: "required"
                              },
        errorPlacement: function(error, element) {
            $(element).filter(':not(.valid)').addClass("invalid");
        },
        success: function(error) {
            $("#gold_form").find('.valid').removeClass("invalid").addClass("success");
        },
                        });
                    });