Recursively validating HTML input elements

Question

I have written the following recursive input validator and it works for me. Is there a better way to visit each dom element and check if it is an input field and validate it?

function formValidator(parent)
{
    //base case no children
    if( parent.children().length == 0)
        return

    //recurse through each childs' child
    parent.children().each(function(){
        formValidator($(this));

    /**
    * Work : check if this node is an input node
    */
        if($(this).is("input"))
        {
            var type = $(this).attr('type');

            if(type =="text")
              //do work bro

        }

   });//end for each

}

This question might be better suited for the code review stack exchange since the nature of your question is to seek improvement rather than help with a problem. — Wai Ha Lee
– Wai Ha Lee, Commented May 20, 2015 at 20:27
Oh my, I didn't even know code review was a thing. Can I move my post there or can someone move it for me? — dimlee
– dimlee, Commented May 20, 2015 at 20:27
You can delete your post here and repost it there (preferred), or flag it for a moderator's attention, asking for it to be migrated (probably avoid that as it's more work for the overworked moderators). — now you have an answer I don't think you can delete it. — Wai Ha Lee
– Wai Ha Lee, Commented May 20, 2015 at 20:30

AmmarCSE · Accepted Answer · 2015-05-20 20:56:13Z

4

If by better you mean less verbose, this is equivalent functionally

parent.find('*').each(function(){
    /**
    * Work : check if this node is an input node
    */
        if($(this).is("input"))
        {
            var type = $(this).attr('type');

            if(type =="text")
              //do work bro

        }

   });//end for each

Notice that there is no need for recursion here because

parent.find('*')

uses the *(all-selector). This will get all children and nested children.

Update

To improve performance, you can refactor above to

parent.find('input[type="text"]').each(function(){
        var type = $(this).attr('type');

                //if(type =="text")
                  //above no longer needed
       });//end for each

This will get all nested input elements so you won't have to even check for

if($(this).is("input"))

edited May 20, 2015 at 20:56

answered May 20, 2015 at 20:30

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

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

3 Comments

dimlee Over a year ago

I like this answer but I'm mildly curious which would be more efficient.

Rick Hitchcock Over a year ago

You can avoid the type check with parent.find('input:text') ...

AmmarCSE Over a year ago

@RickHitchcock, very nice observation! Updated my answer. Thanks!

Georgios Dimitriadis · Accepted Answer · 2015-05-20 20:30:53Z

3

I would use a narrower selector:

parent.children().find("input:text").each(function(){
    // Valid $(this) element to validate
});

answered May 20, 2015 at 20:30

Georgios Dimitriadis

6856 silver badges16 bronze badges

1 Comment

Rick Hitchcock Over a year ago

This excludes inputs that are immediate children of parent, which the OP's code handles (if($(this).is("input"))). You can fix it by removing the children() method.

Collectives™ on Stack Overflow

Recursively validating HTML input elements

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related