Jquery multiple form validation

td234
td234 used Ask the Experts™
on
Hi.

I am trying to learn jQuery and on one page I have multiple forms I want check before submission. All the forms are similar in layout, they are just editing different values. I have give the forms a common class and the fields within the forms a common class. I am trying to use one fucntion to do the validation, but having trouble figuring out how ot reference "this" form's input named "title". Here is that I have.

< form action="/fee/insert" id="0" class="edit_form">
<input type="text" size="30" name="title" id="title" value="">
<select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select>
<input type="text" size="10" name="amount" class="amount" value="">
<input type="submit" name="submit" value="Save">
</form>

Above form repeated several times.

<script type="text/javascript">
$(function() {
      $('. edit_form').submit(function(){
            msg = '';
            // HOW TO I REFERENCE THE input named title in this form?
            //alert($(' input[name=title]').val());
            if($(' input[name=title]').val() == '') {
                  msg = msg+"You must enter a name.<br>\n";
            }
            if(msg!='') {
                  alert(msg);
                  return false
            } else {
                  return true;
            }
      });
})
</script>

Tanks for any help.

Thom
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Here ye go

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function() {
      $('.edit_form').submit(function(){
            msg = '';
            // HOW TO I REFERENCE THE input named title in this form?
            //alert($(' input[name=title]').val());
			
            if($(this).children('input[name=title]').val() == '') {
                  msg = msg+"You must enter a name.<br>\n";
            }
            if(msg!='') {
                  alert(msg);
                  return false
            } else {
                  return true;
            }
      });
})
</script>
</head>

<body>
<form action="" id="0" class="edit_form">
<input type="text" size="30" name="title" id="title" value="">
<select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select>
<input type="text" size="10" name="amount" class="amount" value="">
<input type="submit" name="submit" value="Save">
</form>
<form action="" id="0" class="edit_form">
<input type="text" size="30" name="title" id="title" value="">
<select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select>
<input type="text" size="10" name="amount" class="amount" value="">
<input type="submit" name="submit" value="Save">
</form><form action="" id="0" class="edit_form">
<input type="text" size="30" name="title" id="title" value="">
<select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select>
<input type="text" size="10" name="amount" class="amount" value="">
<input type="submit" name="submit" value="Save">
</form><form action="" id="0" class="edit_form">
<input type="text" size="30" name="title" id="title" value="">
<select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select>
<input type="text" size="10" name="amount" class="amount" value="">
<input type="submit" name="submit" value="Save">
</form><form action="" id="0" class="edit_form">
<input type="text" size="30" name="title" id="title" value="">
<select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select>
<input type="text" size="10" name="amount" class="amount" value="">
<input type="submit" name="submit" value="Save">
</form>
</body>
</html>

Open in new window

Author

Commented:
Ah, this is huge. Thank you so much.

When I tried to format my form in a table this broke. I have tried a couple of things with no luck. How do I find the input when it is in a table cell?

<table>
<tr>
<td><form action="" id="0" class="edit_form">
<input type="text" size="30" name="title" id="title" value=""></td>
<td><select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select></td>
<td><input type="text" size="10" name="amount" class="amount" value=""></td>
<td><input type="submit" name="submit" value="Save">
</form></td>
</tr>
</table>

Commented:
replace children() with find()

if($(this).find('input[name=title]').val() == '') {
                  msg = msg+"You must enter a name.<br>\n";
            }
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
HI.

Thank you so much for your help. I can get that to work if each form contains its own table, but for display purposes, each table row has a form, so I am getting undefined. Here is what I have based on your example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function() {
      $('.edit_form').submit(function(){
            msg = '';
            // HOW TO I REFERENCE THE input named title in this form?
            //alert($(' input[name=title]').val());
                       
            if($(this).find('input[name=title]').val() == '') {
                  msg = msg+"You must enter a name.<br>\n";
            }
            if(msg!='') {
                  alert(msg);
                  return false
            } else {
                  return true;
            }
      });
})
</script>
</head>

<body>
<table>
<tr>
<form action="" id="0" class="edit_form">
<td><input type="text" size="30" name="title" id="title" value=""><td>
<td><select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select></td>
<td><input type="text" size="10" name="amount" class="amount" value=""></td>
<td><input type="submit" name="submit" value="Save"></td>
</form>
</tr>
<tr>
<form action="" id="0" class="edit_form">
<td><input type="text" size="30" name="title" id="title" value=""><td>
<td><select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select></td>
<td><input type="text" size="10" name="amount" class="amount" value=""></td>
<td><input type="submit" name="submit" value="Save"></td>
</form>
</tr>
<tr>
<form action="" id="0" class="edit_form">
<td><input type="text" size="30" name="title" id="title" value=""><td>
<td><select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select></td>
<td><input type="text" size="10" name="amount" class="amount" value=""></td>
<td><input type="submit" name="submit" value="Save"></td>
</form>
</tr>
<tr>
<form action="" id="0" class="edit_form">
<td><input type="text" size="30" name="title" id="title" value=""><td>
<td><select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select></td>
<td><input type="text" size="10" name="amount" class="amount" value=""></td>
<td><input type="submit" name="submit" value="Save"></td>
</form>
</tr>
<tr>
<form action="" id="0" class="edit_form">
<td><input type="text" size="30" name="title" id="title" value=""><td>
<td><select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select></td>
<td><input type="text" size="10" name="amount" class="amount" value=""></td>
<td><input type="submit" name="submit" value="Save"></td>
</form>
</tr>
</table>

</body>
</htm>l
Commented:
You need to re-arrange your html as <form> element does not work between <tr> and <td>.

attached here is the final version of it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function() {
      $('.edit_form').submit(function(){
            msg = '';
            // HOW TO I REFERENCE THE input named title in this form?
            //alert($(' input[name=title]').val());
                       
            if($(this).find('input[name=title]').val() == '') {
                  msg = msg+"You must enter a name.<br>\n";
            }
            if(msg!='') {
                  alert(msg);
                  return false
            } else {
                  return true;
            }
      });
})
</script>
</head>

<body>
<table>
<tr>
<td>
<form action="" id="0" class="edit_form">
<table>
<tr>
<td><input type="text" size="30" name="title" id="title" value=""><td>
<td><select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select></td>
<td><input type="text" size="10" name="amount" class="amount" value=""></td>
<td><input type="submit" name="submit" value="Save"></td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td>
<form action="" id="0" class="edit_form">
<table>
<tr>
<td><input type="text" size="30" name="title" id="title" value=""><td>
<td><select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select></td>
<td><input type="text" size="10" name="amount" class="amount" value=""></td>
<td><input type="submit" name="submit" value="Save"></td>
</tr>
</table>
</form>
</td>
</tr><tr>
<td>
<form action="" id="0" class="edit_form">
<table>
<tr>
<td><input type="text" size="30" name="title" id="title" value=""><td>
<td><select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select></td>
<td><input type="text" size="10" name="amount" class="amount" value=""></td>
<td><input type="submit" name="submit" value="Save"></td>
</tr>
</table>
</form>
</td>
</tr><tr>
<td>
<form action="" id="0" class="edit_form">
<table>
<tr>
<td><input type="text" size="30" name="title" id="title" value=""><td>
<td><select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select></td>
<td><input type="text" size="10" name="amount" class="amount" value=""></td>
<td><input type="submit" name="submit" value="Save"></td>
</tr>
</table>
</form>
</td>
</tr><tr>
<td>
<form action="" id="0" class="edit_form">
<table>
<tr>
<td><input type="text" size="30" name="title" id="title" value=""><td>
<td><select name="type" class="type">
      <option value="amount">Fixed Amount</option>
      <option value="percent">Percent of Rental Fee</option>
      </select></td>
<td><input type="text" size="10" name="amount" class="amount" value=""></td>
<td><input type="submit" name="submit" value="Save"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>

</body>
</htm>

Open in new window

Author

Commented:
Excellent. Thank you so much.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial