Pass deeply nested element to function in JQuery

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>
          开发者_JS百科    <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?

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');
    });
  });
});

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.