Tuesday 9 May 2017

Jquery Validation for radio button

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.validate.js"></script>


<script type="text/javascript">
    $(document).ready(function() {


        <!--simple validation for  radio button ------->

      
        $("#SaveConfirm").click(function(){
            var test=0;
            console.log("here>>>>>>>>>>>");
            if(!($("#r1").is(':checked') || $("#r2").is(':checked')){
                console.log("hide");
                $("#error1").html("Enter select First radio buttion");
                test=1;
                }
            else{
            console.log("show");
            $("#error1").html("");
            console.log("show2s");
            }
          
            if(!($("#r3").is(':checked') || $("#r4").is(':checked'))){
            console.log("hide");
            $("#error2").html("Enter select second radio buttion");
            test=1;
            }
        else{
        console.log("show");
        $("#error2").html("");
        console.log("show2s");
        }
     
            if(test==1)
                return;
          
        });
    });
</script>


<script type="text/javascript">
$(document).ready(function(){


<!--validation for if radio button is checked with JQuery?------->

  
$('.fistRed').change(function(){
      
        if($(this).is(':checked'))
            $('#error1').html('');
    });
      
$('.secdRed').change(function(){
  
    if($(this).is(':checked'))
        $('#error2').html('');
})     
});
</script>

 

 <!--Input Fields---->


<div colspan="2" align="center">
<tr>
      <td><p>
        <label>
          <input type="radio" id="r1" name="radio1"  class="form-input fistRed" />
          yes</label>
        <label>
          <input type="radio" id="r2" name="radio1"  class="form-input fistRed" />
          no</label>
        <br />
      </p></td>
    </tr>
    <label class="form-label" style="color:red;" id="error1"></label><br>
    <tr>
      <td><p>
        <label>
          <input type="radio" id="r3" name="radio2"  class="form-input secdRed" />
          yes</label>
        <label>
          <input type="radio" id="r4" name="radio2"  class="form-input secdRed"/>
          no</label>
        <br />
      </p></td>
    </tr>
    <label class="form-label" style="color:red;" id="error2"></label>
        
<div colspan="2" align="center">
<input type="submit" value="Rigister" id="SaveConfirm">
</div>
</div>

No comments:

Post a Comment