Pass deeply nested element to function in JQuery

Question

I have this form:

<form action="contact.php" method="post" id="contactform">
          <ol>
            <li>
              <label for="name">First Name * </label>
              <input id="name" name="name" class="text" />
            </li>
            <li>
              <label for="email">Your email * </label>
              <input id="email" name="email" class="text" />
            </li>
            <li>
              <label for="company">Company</label>
              <input id="company" name="company" class="text" />
            </li>
            <li>
              <label for="subject">Subject</label>
              <input id="subject" name="subject" class="text" />
            </li>
            <li>
              <label for="message">Message * </label>
              <textarea id="message" name="message" rows="6" cols="50"></textarea>
            </li>

            <li class="buttons">
              <input type="image" name="imageField" id="imageField" src="images/send.gif" />
            </li>
          </ol>
        </form>

This javascript function that does some basic validation:

function validateRequired(field,alerttxt) {
    with (field) {
        if (value==null||value=="") {
            alert(alerttxt);
            return false;
        }
        return true;
    }
}

And this script (written with jquery) to intercept the submit event

jQuery(document).ready(function(){
    $('#contactform').submit(function(){
        ...
    });
});

The problem is that, inside the last script I want to call validateRequired passing each required input/textarea (namely: name, email and message) as first parameter.

I tried like this:

validateRequired($('#name'));

but it doesn't work.

How can I do this?

Jeff Vyduna · Accepted Answer · 2010-05-08 00:32:25Z

2

I would first add a class to each required input.

  <li>
    <label for="subject">Subject</label>
    <input id="subject" name="subject" class="text required" />
  </li>

Then select all the required inputs with one jQuery selector and iterate through them.

jQuery(document).ready(function(){
  $('#contactform').submit(function(){
    $('#contactform input.required').each(function(){
      validateRequired(this, this.attr('name') + ' is required');
    });
  });
});

While this spits out generic alerts like "subject is required", hopefully you can use this iterator pattern to implement an even better user experience, perhaps by highlighting the required text fields with a different background color.

jQuery(document).ready(function(){
  $('#contactform').submit(function(){
    $('#contactform input.required').each(function(){
      this.addClass('error');
      alert('The fields highlighted in red are required');
    });
  });
});

answered May 8, 2010 at 0:32

Jeff Vyduna

212 bronze badges

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

1 Comment

Federico klez Culloca Over a year ago

the first solution partially works. I had to chage this.attr('name') to this.id. Also it doesn't validate message since it is a textarea. Any other hint?

Federico klez Culloca · Accepted Answer · 2010-05-09 09:57:22Z

0

I was inspired by Jeff Vyduna solution, but solved it on my own.

$('#contactform').submit(function(){
            var submit = true;

        $('#contactform *.required').each(function(){
                if(!validateRequired(this, this.id + ' is required'))
                {
                    submit = false;
                    return false;
                }
        });

        return submit;
});

Obviousy the input fields (including the textarea) have to be of class required.

answered May 9, 2010 at 9:57

Federico klez Culloca

27.3k17 gold badges61 silver badges102 bronze badges

1 Comment

meo Over a year ago

hmm i started to do it my self to when i found this: docs.jquery.com/Plugins/Validation

Collectives™ on Stack Overflow

Pass deeply nested element to function in JQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related