jquery-form-validator

How to add form validation on group of radio button using jquery form validation plugin


How to add form validation on group of radio button using jquery form validation plugin. I have tried to add data-validation="required" but its not working.

PFB HTML code :

        <input type="radio" id="inlineRadio1" value="option1" name="radioInline" data-validation="required"> 
        <label for="inlineRadio1" data-validation="radio_button"> Inline One </label> 
        <input type="radio" id="inlineRadio2" value="option2" name="radioInline" data-validation="required"> 
        <label for="inlineRadio2"> Inline Two </label>
    </div>

Script code is :

$.validate()

I have taken the plugin from this url http://www.formvalidator.net/


Solution

  • You have to make a custom validator called custom radio. and add the attribute "data-validation="custom_radio" on input type

    PFB code for your reference:

    <div class="radio radio-info radio-inline">
    
        <input type="radio" id="inlineRadio1" value="option1" name="radioInline" data-validation="custom_radio"> 
        <label for="inlineRadio1" data-validation="radio_button"> Inline One </label> 
        <input type="radio" id="inlineRadio2" value="option2" name="radioInline" data-validation="custom_radio"> 
        <label for="inlineRadio2"> Inline Two </label>
    </div>
    

    This is javascript code for custom validator where you return boolean based on value. which should get called before $.validate() function.

    $.formUtils.addValidator({
                                      name : 'custom_radio',
                                      validatorFunction : function(value, $el, config, language, $form) {
    
                                          if(value==='option 1'){
                                              return false;
                                          }else{
                                              return true;
                                          }
    
                                      },
                                      errorMessage : 'You have to atleast check one radio',
                                      errorMessageKey: 'badradiobutton'
                                    });
    $.validate()