i have 3 drop down lists as long the user selects one of the option from one of the drop downs pass validation but if users don't select an option from at least one of the drop down fail validation.
Code:
<?php
// Create an empty array to hold the error messages.
$arrErrors = array();
//Only validate if the Submit button was clicked.
if (!empty($_POST['Submit'])) {
// Each time there's an error, add an error message to the error array
// using the field name as the key.
if ($_POST['campustype']=='')
$arrErrors['campustype'] = 'Please select category.';
if ($_POST['howt']=='')
$arrErrors['howt'] = 'select one field.';
if (count($arrErrors) == 0) {
// If the error array is empty, there were no errors.
// Insert form processing here.
} else {
// The error array had something in it. There was an error.
// Start adding error text to an error string.
$strError = '<div class="formerror"><p><img src="/images/triangle_error.gif" width="16" height="16" hspace="5" alt="">Please check the following and try again:</p><ul>';
// Get each error and add it to the error string
// as a list item.
foreach ($arrErrors as $error) {
$strError .= "<li>$error</li>";
}
$strError .= '</ul></div>';
}
}
?>
<style>
.formerror {
border: 1px solid red;
background-color : #FFCCCC;
width: auto;
padding: 5px 0;
}
.errortext {
padding-left: 80px;
font-size:14px;
color:red;
}
</style>
<script type="text/javascript">
function toggleSelect(id)
{
if (id == 'off')
{
document.getElementById('in-campu').style['display'] = 'none'; //ui
document.getElementById('1').style['display'] = 'none';
document.getElementById('off-campus').style['display'] = 'block';
}
if (id == 'in')
{
document.getElementById('off-campus').style['display'] = 'none';
document.getElementById('1').style['display'] = 'none';
document.getElementById('in-campu').style['display'] = 'block';//ui
}
if (id == '1')
{
document.getElementById('off-campus').style['display'] = 'none';
document.getElementById('in-campu').style['display'] = 'none'; //ui
document.getElementById('1').style['display'] = 'block';
}
}
</script>
<?php echo $strError; ?>
<form method="post" action="<?php echo $PHP_SELF; ?>">
<!--
For every form field, we do the following...
Check to see if there's an error message for this form field. If there is,
add the formerror class to the surrounding paragraph block. The formerror
class contains the highlighted box.
Insert the contents of what the user submitted bak into the form field.
Check again to see if this field has an error message. If it does, show
the error icon and the error message next to the field.
-->
<p<?php if (!empty($arrErrors['campustype'])) echo ' class="formerro"'; ?>>
<?php if (!empty($arrErrors['campustype'])) echo '<br /><span class="errortext">'.$arrErrors['campustype'].'</span>'; ?><br/><label for="incampus">Select Category</label>
<input type="radio" name="campustype" value="in" onclick="toggleSelect('in');" /><label for="campustype">Music</label>
<input type="radio" name="campustype" value="off'" onclick="toggleSelect('off');" /><label for="campustype">Sports</label>
<input type="radio" name="campustype" value="1" onclick="toggleSelect('1');" /><label for="campustype">Art</label>
</p>
<p<?php if (!empty($arrErrors['howt'])) echo ' class="formerro"'; ?>>
<?php if (!empty($arrErrors['howt'])) echo '<br /><span class="errortext">'.$arrErrors['howt'].'</span>'; ?><br/>
<select id="in-campu" name="howt">
<option name="hot" value ="">--Select Music Type--</option>
<option name="how" value="tuiy">Concerts</option>
<option name="hot" value="tfyrty" >Clubs</option>
<option name="hot" value="rtyyt">Festival</option>
<option name="hot" value="uyity">Opera</option>
</select>
<select id="off-campus" class="item" name="hot" style="display: none;">
<option name="dg" value=""> -- Select Sport Type -- </option>
<option name="hot" value="dfg">Formula 1</option>
<option name="hot" value="dfrg">Footbal</option>
<option name="hot" value="dfgf">Basketball</option>
<option name="how" value="rugby">Rugby</option>
<option name="hot" value="cricket">Cricket</option>
</select>
<select id="1" class="item" name="ho" style="display: none;">
<option name="hot" value=""> -- Select Art & Theatre Type -- </option>
<option name="ht" value="hjk">Comedy</option>
<option name="ho" value=" gfhftgh">Drama</option>
<option name="hghjot" value="ioiui">Museus</option>
</select>
</p>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
</form>
Comment