2

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>
6
<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-radio validate-one-required-by-name" value="I will visit Lab"> I will visit Lab
                </div>
                <div>
                <input type="radio" name="radio" class="input-radio  validate-one-required-by-name" value="Visit me at home/office +Rs50.00" > Visit me at home/office +Rs50.00
                </div>
         </li>

for html

    <div class="input-box">
  <div style="float:left">
                            <input type="text" id="testschedule" name="testschedule" value="" class="input-text required-entry validation-failed" title="Test Schedule" style="width: 150px;"><div style="" id="advice-required-entry-testschedule" class="validation-advice">This is a required field.</div></div><div style="float:left">
                            <img style="" title="Select Date" id="date_select_trig" alt="" src="http://www.labwise.in/devel/skin/frontend/ultimo/default/images/xcalendar.gif.pagespeed.ic.nkzRZoIMTp.png">
  </div><div style="float:left;widht:50px">
                            <select name="date_time" id="date_time" class="input-select required-entry validate-select validation-failed" style="width: 50px;">
                                        <option value="">--</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>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                </select><div style="" id="advice-required-entry-date_time" class="validation-advice">This is a required field.</div></div><div style="float:left">
                                <b>:</b>
  </div><div style="float:left">
                                <select name="date_time" id="date_time" class="input-select required-entry validate-select validation-failed" style="width: 50px;">
                                        <option value="">--</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>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                </select>
  </div><div style="float:left">
                                <select name="date_time" id="date_time" class="input-select required-entry validate-select validation-failed" style="width: 50px;">
                                        <option value="">--</option>
                                        <option value="1">AM</option>
                                        <option value="2">PM</option>
                                </select>
  </div><div style="float:left">
                        </div></div>
  • it is getting more gap between the radio buttons – Mouni Nov 20 '15 at 9:05
  • updated kind check the answer – Qaisar Satti Nov 20 '15 at 9:10
  • it is showing same the gap is so much it is not getting as in the image also – Mouni Nov 20 '15 at 9:12
  • I have added the image file after applying your code – Mouni Nov 20 '15 at 9:14
  • it is css issue nothing with validation concern – Qaisar Satti Nov 20 '15 at 9:16
2

If you are using magento form validation add class(magento-checkbox-validation) in your radio inputs(of same group):

class="magento-checkbox-validation" OR use "validate-one-required" on the last radio/checkbox in the group

And if you are writing your custom script then add this function in script :

  function validateRadioIsSelected()
{
 var options = $$('input.Classname');
    for( i in options ) {
        if( options[i].checked == true ) {
            return true;
        }
    }
    return false;
}

if above function return true, it means your radio is selected

1

You have to set class name in radio box input field

class="validate-one-required-by-name".

check for above value.

  • Where i need to put in my code.please suggest me. – Mouni Nov 20 '15 at 8:52
  • As in the image i need to get the alert when i click on the submit button – Mouni Nov 20 '15 at 8:53
  • For radio button validation,<input type="radio" class="validate-one-required-by-name" name="radiobutton" value="" /> – Rakesh Jesadiya Nov 20 '15 at 8:54
  • that's was the doubt for both buttons should i need to add – Mouni Nov 20 '15 at 8:55
  • you can check by adding in both button.if its not working then you can add that class into label tag class above li of radio. – Rakesh Jesadiya Nov 20 '15 at 8:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.