How to use jquery validation in my registration form

Question

I want to do is perform a jquery validation in my entire registration form if someone click the create button.

My problem is after i click the button nothing really happens. Can someone help me with this?

current output: http://jsfiddle.net/5kcsn/3/

$(document).ready(function () {
    $('#create').click(function () {
        $('form').validate({
            rules: {
                fname: {
                    minlength: 3,
                    maxlength: 15,
                    required: true
                },
                lname: {
                    minlength: 3,
                    maxlength: 15,
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                reemail: {
                    required: true,
                    email: true
                },
                password: {
                    minlength: 6,
                    maxlength: 15,
                    required: true
                },
                gender: {
                    required: true
                },
                month,
                day,
                year: {
                    required: true
                }
            },
            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error');
            },
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function (error, element) {
                if (element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });
    });
});

Answer 1

You have three problems.

1) Invalid format within your rules option. The parameters for this option can only be key:value pairs. You cannot use a comma separated list of field names in place of a single key.

month,  // <- key is missing value.  key:value
day,    // <- key is missing value.  key:value
year: {
    required: true
}

Should be...

month: {
    required: true
},
day: {
    required: true
},
year: {
    required: true
}

2) You've improperly placed the .validate() method within a click handler. .validate() is only the initialization method of the plugin, and gets called once within a DOM ready event handler.

3) Your <button> is a type="button", which will always be ignored by the plugin. Change it to type="submit" so that it's automatically captured.

Note: I noticed you have two different DOM ready event handlers. This is not necessary. All code can be placed within a single DOM ready handler.

Updated DEMO: http://jsfiddle.net/5kcsn/8/