custom method to check if child div hasClass - jquery validate

Question

I have been fighting with a custom validation all day, I thought it was about time to ask for some help.

What I have built is a select user interface similar to facebook when you add users to an event. I am trying to build a function that will return an error if none of the users are selected. The problem I am running into is that the parent div needs to be treated like a form element, but I can find any info on how to do that.

Another thought came to me while i was making the JSfiddle. I store the User ID's in an array. Maybe the validation could check for an empty array? Im not sure how to do that either, or which way would be ideal..

Here is a fiddle to play with: http://jsfiddle.net/7neCU/1/

Here is what I have tried so far.

    $.validator.addMethod('require-one-div', function (element) {
        if ($('#trainees').children('.each_user').hasClass('selected'))
            return true;
        }, "Please select at least 1 trainee");

and the rules

    rules: {
            trainees:{
                'require-one-div':true
            },
        }

I also gave the parent div #trainees the name & id "trainees" and class of required.

Thank you for any suggestions or ideas.

A validation plugin is likely to look for input fields. Why not add input type='hidden' with true/false values set with a click event? — greener
– greener, Commented Dec 14, 2012 at 0:47

Ryley · Accepted Answer · 2012-12-14 19:06:23Z

1

jQuery Validate does not support rules on a section. It is a form plugin. So you must be using input,textarea,select.

As was suggested in a comment, you probably need a few things:

Make a hidden checkbox group or radio group
Hook clicks of your profiles into each checkbox or radio
Call validate on that, but make sure to specify ignore: '', otherwise validate will ignore any hidden form fields.

answered Dec 14, 2012 at 19:06

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Lucid Over a year ago

hey thanks alot! I seemed to have gotten it to work with this info.

neouser99 · Accepted Answer · 2012-12-14 17:26:01Z

0

Humm.... not 100% sure how this validation plugin works. But a method could simple do this as the "validation" step.

$.validator.addMethod('require-one-div', function (element) {
    return $('#trainees .each_user.selected').length;
}, "Please select at least 1 trainee");

Basically it says, if there are 0 .selected .each_user divs, the validation will return 0 (falsy). If there is at least one, .length >= 1 is truthy, meaning validation passes. If the validation is the opposite, just tack a ! in front of the length check !$('#trainees .each_user.selected').length

answered Dec 14, 2012 at 17:26

neouser99

1,8271 gold badge10 silver badges24 bronze badges

Collectives™ on Stack Overflow

custom method to check if child div hasClass - jquery validate

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related