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?

Answer 1

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.