how to optimize jquery code with find()?

Question

i have a form with an id="test". Inside the form i have some select, input and textarea fields.

i want to iterate through each of them and check if they are empty and then do something with them.

var editTest= $('#test');

editGeneric(editTest);

var editGeneric= function(form){
    form.children().find('select').each(
        function(){
            var values = $(this).val();
            if(values === 'select one' || values === 'Select One' || values == 0 || values == 99){
                $(this).css('border', '1px solid red');
            }
        }
    );

    form.children().find('input').each(
        function(){
            var values = $(this).val();
            if(values === ''){
                $(this).css('border', '1px solid red');
            }
        }
    );

    form.children().find('textarea').each(
        function(){
            var values = $(this).val();
            if(values === ''){
                $(this).css('border', '1px solid red');
            }
        }
    );
}

this code does what i need, but you can see that i repeat myself a few times.

how can i simplify this code so i can maybe use it with some other forms?

any ideas?, thanks

edit: thanks all

i got the code down to:

var editGeneric= function(form){

    form.children().find(':input').each( function(){
            var values = $(this).val();

            if ($(this).is('select')){
                if(values === 'select one' || values === 'Select One' || values == 0){
                    $(this).css('border', '1px solid red');
                }
            }
            if ($(this).is('input') || $(this).is('textarea')){
                if(values === ''){
                    $(this).css('border', '1px solid red');
                }
            }
        }
    );

}

editGeneric($('test'));

Why are you using `form.children().find('...')` instead of directly `form.find('...')`? Do you want to exclude some items at top of the form? — Samuel Caillerie, Dec 04 '12 at 21:20

Explosion Pills · Accepted Answer · 2012-12-04T21:32:58.613

You can use jQuery's :input selector, which selects inputs, selects, and textareas:

form.children().find(':input').each( ...

The only problem is that your select validation is a little different, so you can either check .is('select') to change the condition:

if (($(this).is('select')
   && (values === 'select one' || values === 'Select One'
   || values == 0 || values == 99) || !$(this).is('select') && values === ''))
   || !$(this).is('select') && values === '') {

You also don't have to use form.children.find() .. you could just use $("#test :input") or $(":input", form);

score 1 · Answer 2 · answered Dec 04 '12 at 21:17

1

Just combine the selectors:

form.children().find('select,input,textarea').each(function(){
        if(!$(this).val()){
            $(this).css('border', '1px solid red');
        }
    }
);

Then alter your <select> so that any invalid option has an empty or zero value attribute instead of "select one" or 99.

answered Dec 04 '12 at 21:17

Blazemonger

90,923
26
142
180

1

There is just the additional condition for selects (with default values) which is not handled there, isn't it? – Samuel Caillerie Dec 04 '12 at 21:18
Yes, but there's no reason for those default values to equal "select one" when they can just as easily equal an empty string. If you can't submit the form with that option selected, who cares what the value is? – Blazemonger Dec 04 '12 at 21:21
how would i take care of the `select` in this case – Patrioticcow Dec 04 '12 at 21:24
Update the ` – Blazemonger Dec 04 '12 at 21:26

how to optimize jquery code with find()?

2 Answers2