Dear Bullant,
Is is possible to have error message below the select box. Another thing do you think I can use the jquery to build the dynamic select box rows and validate it via javascript which you have suggested? Will there be any conflict?
Quote:
Originally Posted by bullant
Let's say your Add button generates rows in the DOM similar to the ones in the demo below.
When you click the Submit button, the cells containing invalid selections in their <select>s will have a red background colour.
You can add as many rows and <select>s to each row as you like without having to touch the javascript.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
function validateForm(){
tbodyInputsO = document.getElementById('tbodyInputs');
isDataValid = true;
for(i=0; i < tbodyInputsO.rows.length; i++){
var selO = tbodyInputsO.rows[i].getElementsByTagName('select');
for(j=0; j < selO.length; j++){
selO[j].parentNode.style.backgroundColor = 'white';
if(selO[j].selectedIndex == 0){
selO[j].parentNode.style.backgroundColor = 'red';
isDataValid = false;
}
}
}
if(!isDataValid){
alert('Red cells have invalid selections');
}
return isDataValid;
}
</script>
</head>
<body>
<form action="" method="post" onsubmit=" return validateForm();">
<table id="tbl1" cellspacing="5" cellpadding="3" border="1">
<tbody id="tbodyInputs">
<tr>
<td>
<select name="selFrom[]">
<option value="" selected="selected">Select From Location</option>
<option value="from_1">From 1</option>
<option value="from_2">From 2</option>
</select>
</td>
<td>
<select name="selTo[]">
<option value="" selected="selected">Select To Location</option>
<option value="from_1">To 1</option>
<option value="from_2">To 2</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="selFrom[]">
<option value="">Select From Location</option>
<option value="from_1">From 1</option>
<option value="from_2">From 2</option>
</select>
</td>
<td>
<select name="selTo[]">
<option value="">Select To Location</option>
<option value="from_1">To 1</option>
<option value="from_2">To 2</option>
</select>
</td>
</tr>
</tbody>
</table>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
|