jquery-----jquery not woring in html form

I have a form, using jquery Datepicker and jquery validation plugin , but it is not work. The Datepicker cannot show out and jquery validation plugin not doing validate.

form

<div class="well">
<form class="form-horizontal" method="post" action="#">
    <div class="form-group">
        <label for="username" class="control-label col-xs-2">name     <div class="col-xs-3">
            <input class="form-control input-sm" name="username" type="text">
            <p class="help-block">enter name</p>
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="control-label col-xs-2">password</label>
        <div class="col-xs-3">
            <input class="form-control input-sm" name="password" type="password">
            <p class="help-block">enter password</p>
        </div>
    </div>
    <div class="form-group">
        <label for="password2" class="control-label col-xs-2">password 2</label>
        <div class="col-xs-3">
            <input class="form-control input-sm" name="password2" type="password">
            <p class="help-block">enter password again</p>
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="control-label col-xs-2">email</label>
        <div class="col-xs-3">
            <input class="form-control input-sm" name="email" type="text">
            <p class="help-block">enter mail</p>
        </div>
    </div>
    <div class="form-group">
        <label for="date" class="control-label col-xs-2">date</label>
        <div class="col-xs-3">
            <input class="form-control input-sm" name="date" id="txtDate" type="text">
            <p class="help-block">date mail</p>
        </div>
    </div>
    <div class="form-group">
        <label for="tel" class="control-label col-xs-2">tel</label>
        <div class="col-xs-3">
            <input class="form-control input-sm" name="tel" type="text">
            <p class="help-block">tel</p>
        </div>
    </div>
    <div class="form-group">
        <label for="place" class="control-label col-xs-2">place</label>
        <div class="col-xs-3">
            <select class="form-control input-sm" name="place">
                <option value=""></option>
                <option value="a">a</option>
                <option value="b">b</option>

            </select>
            <p class="help-block">place</p>
        </div>
    </div>
    <div class="form-group">
        <label for="captcha" class="control-label col-xs-2">code</label>
        <div class="col-xs-3">
            <input class="form-control input-sm" name="captcha" type="text">

    </div>

            <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">yes</button>
        </div>
    </div>
</form>
</div>

javascript

<script type="text/javascript">
    <!--
    $(function () {
        $("#txtDate").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy-mm-dd',
            yearRange: '1930:' + new Date().getFullYear().toString()
        });
    //-->
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $.validator.addMethod(
            "australianDate",
            function(value, element) {
                return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
            },
            "Please enter a date in the format dd/mm/yyyy."
        );

        $('form').validate({
            rules: {
                username: {
                    required: true,
                    minlength: 6,
                    maxlength: 20
                },
                password: {
                    minlength: 6,
                    maxlength: 20,
                    required: true
                },
                password2: {
                    minlength: 6,
                    maxlength: 20,
                    required: true
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                date: {
                    australianDate : true
                },
                place: {
                    required: true
                },
                captcha: {
                    required: true
                },
                tel: {
                    required: true,
                    number: true,
                    minlength: 8,
                    maxlength: 8
                }
            },

            invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {
                    alert('error!');
                }
            },
            highlight: function(element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function(element) {
                $(element).closest('.form-group').removeClass('has-error');
            },
            errorElement: 'span',
            errorClass: 'showerror',
            errorPlacement: function(error, element) {
                if(element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });
    });

</script>

How can i fix the problem?

The jsfiddle