asked on

Conditional Validation of fields

Hi Expert,

I've got this little form with some mandatory fields using HTML5 "required" attributes.
This part forces the user to enter all fields that are required in basics. It requires a parent to fill in his or her membership number and mail address and the gender, name and age of at least one child.

But now some parents have more than one child and they enter a optional second or third child. But they forget to enter all three fields and enter only their names.

Can I dynamically make all horizontal aligned fields of the second and third child required in case one of the three horizontal aligned fields of that child has a value?

I've tried to make it work with a java script but that did not work.

<html>
<head>
<title></title>
</head>
<body>
<center>
<form method="post" name="test" action="data_handler.php">
<table>
	<tr>
		<td><label for='text'>Your number :</label></td>
		<td><input type='number' name='PNR'  id='PNR' autofocus required><font color='red'>*</font></td>
	</tr>
	<tr>
		<td><label for="text">E-mail :</label></td>
		<td><input type="email" name="email" id="email" required><font color="red">*</font></td>
	</tr>
	<tr>
		<td colspan=2><label for="text">Kids (max.3):</label></td>
	</tr>
	<tr>
		<td></td>
		<td>
			<table border=0>
				<tr>
					<th><font color="red">*</font>gender</th><th><font color="red">*</font>given name</th><th><font color="red">*</font>age</th>
				</tr>
				<tr>
					<td>
						<select name="gender1" id="gender1" required>
							<option value="">Select...</option>
							<option value="g">girl</option>
							<option value="b">boy</option>
						</select>
					</td>
					<td><input type="text" name="name1" id="name1" size=40 required></td>
					<td>
						<select name="age1" id="age1" required>
							<option value="">select...</option>
							<option value="0">0</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>						
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
						</select>
					</td>
				</tr>
							<tr>
					<td>
						<select name="gender2" id="gender2">
							<option value="">select...</option>
							<option value="g">girl</option>
							<option value="b">boy</option>
						</select>
					</td>
					<td><input type="text" name="name2" id="name2" size=40></td>
					<td>
						<select name="age2" id="age2">
							<option value="">select...</option>
							<option value="0">0</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>						
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						<select name="gender3" id="gender3">
							<option value="">select...</option>
							<option value="g">girl</option>
							<option value="b">boy</option>
						</select>
					</td>
					<td><input type="text" name="name3" id="name3" size=40></td>
					<td>
						<select name="age3" id="age3">
							<option value="">select...</option>
							<option value="0">0</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>						
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
						</select>
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
      <td></td><td><input type="submit" value="Submit" onclick="validateAndSend()"></td>
	</tr>
</table>	
</form>
</center>
<script>
    function validateAndSend() {
        if ((test.gender1.value != '' || test.name2.value != '' || test.age2.value != '' ) AND (test.gender2.value == '' || test.name2.value == '' || test.age2.value == '' )) {
            alert('You should fill in all required fields!');
            return false;
        }else{
            test.submit();
        }
    }
</script>
</body>
</html>

Open in new window

Thanks

ASKER CERTIFIED SOLUTION