user3719192
user3719192

Reputation: 23

some issues in my jquery validation registration form

My problem is when i press the button or type in my last and first name one of them dont have a jquery validation on it. And how do i make the three comboboxes have a 1 rule jquery validation instead of three poping out?

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

 $('form').validate({
        rules: {
            fname: {
                minlength: 3,
                maxlength: 15,
                required: true
            },
            lname: {
                minlength: 3,
                maxlength: 15,
                required: true
            },

            month: {
                required: true
            },
            day: {
                required: true
            },
            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);
            }
        }
    });

Upvotes: 0

Views: 295

Answers (1)

Shaunak D
Shaunak D

Reputation: 20636

Check this Working Fiddle


  • You need to group the elements.

    groups: {
        DateofBirth: "month day year"
    },
    

And in errorPlacement: part, add this

errorPlacement: function (error, element) {
            if (element.attr("name") == "day" || element.attr("name") == "month" || element.attr("name") == "year") 
                error.insertAfter(".dateWrap");
            else 
                error.insertAfter(element);
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }

  • For lname issue, your input field in html for first name has id="lname". So there were two <input> elements with the ID as lname.

Reference : .validate() groups.

Upvotes: 1

Related Questions