Solved

Simple Form Validation

Posted on 2004-08-23
4
152 Views
Last Modified: 2010-04-06
Hello

Could someone please tell me if the following is possible?

I have a form (see html below) and all i am trying to do is write a simple validation function to check the following:

1) If they check the check box and select the option "Completed" then a warning should be displayed.

The function should be good for a form that can contain only 1 row or many rows.

Thanks




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form action="" method="get" name="tester">
  <table border="1">
    <tr>
      <td width="20%"><select name="select" size="1">
          <option>No Action</option>
          <option>In Progress</option>
          <option>Completed</option>
        </select>
      </td>
      <td width="80%"><input name="ckbox1" type="checkbox" value="">
        Option1 to select</td>
    </tr>
    <tr>
      <td><select name="select" size="1">
          <option>No Action</option>
          <option>In Progress</option>
          <option>Completed</option>
        </select>
      </td>
      <td><input name="ckbox2" type="checkbox" value="">
        Option2 to select</td>
    </tr>
  </table>
</form>
</body>
</html>
0
Comment
Question by:runcsmeduncs
4 Comments
 
LVL 5

Accepted Solution

by:
LindzK earned 25 total points
ID: 11869585
Hi,

below is a rework of your code, with added javascript to do the validation.  It will work for as many rows as you wish to add, all you need to ensure is that each checkbox has an id of chkboxN   where N = the row number, for example id="chkbox1".  Also give each selection box an id of selectN again where N = the row number, for example id="select1" or id="select2"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript">
  var warning = "This is the warning message";
 
  // function takes in the row number, so it knows what to validate
  function ValidateRow(RowNum)
  {
    // construct the id's of the object in the row
    var chkid = "chkbox" + RowNum;
      var selid = "select" + RowNum;
      
      // get the objects that you wish to validate
      var selobj = document.getElementById(selid);
      var chkobj = document.getElementById(chkid);
      
      // validate that the check box is checked, and the selection box says completed
      if (chkobj.checked && selobj.options[selobj.selectedIndex].text=="Completed")
      {
        window.alert(warning);
      }
  }
</script>

</head>
<body>
<form action="" method="get" name="tester">
  <table border="1">
    <tr>
      <td width="20%">
        <select id ="select1" name="select" size="1" onclick="ValidateRow(1)">
          <option>No Action</option>
          <option>In Progress</option>
          <option>Completed</option>
        </select>
      </td>
      <td width="80%">
        <input id="chkbox1" name="ckbox1" type="checkbox" value="" onclick="ValidateRow(1)">
        Option1 to select</td>
    </tr>
    <tr>
      <td>
        <select id="select2" name="select" size="1" onclick="ValidateRow(2)">
          <option>No Action</option>
          <option>In Progress</option>
          <option>Completed</option>
        </select>
      </td>
      <td><input id="chkbox2" name="ckbox2" type="checkbox" value="" onclick="ValidateRow(2)">
        Option2 to select</td>
    </tr>
  </table>
</form>
</body>
</html>
0
 
LVL 1

Expert Comment

by:cbelle13013
ID: 11870336
Does it have to be a javascript validation? Or can it be a PHP or ASP validation?
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question