Pass deeply nested element to function in JQuery
- by klez
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?
