I have created the form but i could validate my radio button fields.
When I click on the submit it is not showing any alert symbol.
When no radio button is selected it has to show as in the image for radio button.
please anyone help me.
My form
<form action="<?php echo $this->getFormAction(); ?>" id="bookingtest" method="post">
<div class="fieldset">
<ul class="form-list">
<li class="fields">
<div class="field">
<label for="testname" class="required"><em>*</em><?php echo $this->__('Test Name') ?> </label>
<div class="input-box">
<input type="text" id="testname" name="testname" value="<?php echo $_GET['name']?>" class="input-text required-entry" title="<?php echo $this->__('Test Name') ?>" />
</div>
</div>
<div class="field">
<label for="city" class="required"><em>*</em><?php echo $this->__('City') ?> </label>
<div class="input-box">
<input type="text" id="city" name="city" value="<?php echo $_GET['city']?>" class="input-text required-entry" title="<?php echo $this->__('City') ?>" />
</div>
</div>
</li>
<li>
<label for="location" class="required"><em>*</em><?php echo $this->__('Location') ?> </label>
<div class="input-box">
<input type="text" id="location" name="location" value="<?php echo $_GET['location']?>" class="input-text required-entry" title="<?php echo $this->__('Location') ?>" />
</div>
</li>
<li class="fields">
<div class="field">
<label for="cname" class="required"><em>*</em><?php echo $this->__('Name') ?> </label>
<div class="input-box">
<input type="text" id="cname" name="cname" value="" class="input-text required-entry" title="<?php echo $this->__('Name') ?>" />
</div>
</div>
<div class="field">
<label for="email" class="required"><em>*</em><?php echo $this->__('Email Address') ?></label>
<div class="input-box">
<input type="text" name="email" value="<?php echo $this->escapeHtml($this->getUsername()) ?>" id="email" class="input-text required-entry validate-email" title="<?php echo $this->__('Email Address') ?>" />
</div>
</div>
</li>
<li>
<label for="mobile" class="required"><em>*</em><?php echo $this->__('Mobile Number') ?> </label>
<div class="input-box">
<input type="text" id="mobile" name="mobile" value="" class="input-text required-entry validate-mobileno" title="<?php echo $this->__('Mobile Number') ?>" />
</div>
</li>
<li>
<label class="required"><em>*</em><?php echo $this->__('Sample Collection') ?> </label></li>
<li>
<div class="radio_button">
<input type="radio" name="radio" class="input-text required-entry validate-select" value="I will visit Lab"> I will visit Lab
</div>
<div>
<input type="radio" name="radio" class="input-text required-entry validate-select" value="Visit me at home/office +Rs50.00" > Visit me at home/office +Rs50.00
</div>
</li>
<li>
<label for="testschedule" class="required"><em>*</em><?php echo $this->__('Test Schedule') ?> </label>
<div class="input-box">
<input type="text" id="testschedule" name="testschedule" value="" class="input-text required-entry" title="<?php echo $this->__('Test Schedule') ?>" style="width: 150px;" />
<img style="" title="Select Date" id="date_select_trig" alt="" src="<?php echo $this->getSkinUrl("images/calendar.gif");?> "/>
<select name="date_time" id="date_time" class="input-text required-entry validate-select" style="width: 50px;" />
<option value=""><?php echo $this->__('--')?></option>
<option value="1"><?php echo $this->__('1')?></option>
<option value="2"><?php echo $this->__('2')?></option>
<option value="3"><?php echo $this->__('3')?></option>
<option value="4"><?php echo $this->__('4')?></option>
<option value="5"><?php echo $this->__('5')?></option>
<option value="6"><?php echo $this->__('6')?></option>
<option value="7"><?php echo $this->__('7')?></option>
<option value="8"><?php echo $this->__('8')?></option>
<option value="9"><?php echo $this->__('9')?></option>
<option value="10"><?php echo $this->__('10')?></option>
<option value="11"><?php echo $this->__('11')?></option>
<option value="12"><?php echo $this->__('12')?></option>
</select>
<b>:</b>
</div>
</li>
</ul>
</div>
<div class="button">
<p class="required"><?php echo $this->__('* Required Fields') ?></p>
<button id= "submit" type="submit" class="button" title="<?php echo $this->__('Book Test') ?>" name="send" id="send2"><span><span><?php echo $this->__('Book Test') ?></span></span></button>
</div>
</form>
<script src="<?php echo Mage::getBaseUrl('js')."calendar/calendar.js" ?>" type="text/javascript"></script>
<script src="<?php echo Mage::getBaseUrl('js')."calendar/calendar-setup.js" ?>" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<?php echo Mage::getBaseUrl('js') ?>calendar/calendar-win2k-1.css" />
<?php echo $this->getLayout()->createBlock('core/html_calendar')->setTemplate('page/js/calendar.phtml')->toHtml();?>
<script type="text/javascript">
if(Validation) {
Validation.addAllThese([
['validate-mobileno','Enter correct mobile number (Eg:9986858483)',
function(v){
//var timePat ="^((\+){0,1}91(\s){0,1}(\-){0,1}(\s){0,1}){0,1}9[0-9](\s){0,1}(\-){0,1}(\s){0,1}[1-9]{1}[0-9]{7}$";
var timePat ="^{0,1}9[0-9](\s){0,1}(\-){0,1}(\s){0,1}[1-9]{1}[0-9]{7}$";
// var matchArray = v.match(timePat);
if(v.length > 0){
if(v.length !=10){
return false;
}else if(v[0]!=9 && v[0]!=8 && v[0]!=7){
return false;
}
return true;
}else {
return false;
}
}
]])
};
var dataForm = new VarienForm('bookingtest', true);
</script>
<script type="text/javascript">
// <![CDATA[
Calendar.setup({
inputField : 'testschedule',
ifFormat : '%d-%b-%Y',
showsTime: false,
button : 'date_select_trig',
singleClick : true,
});
// ]]>
</script>
Best Answer
for html