Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    317
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Radio Button validation

    Hi,

    I have been spending about 2 days to test my radio button validation, still coudn't get what I want. Well, what I'm trying to achieve is :

    I have 5 groups of radio buttons as below:

    <input type="radio" name="group1" value="Y" />
    <input type="radio" name="group1" value="N" />


    <input type="radio" name="group2" value="Y" />
    <input type="radio" name="group2" value="N" />


    <input type="radio" name="group3" value="Y" />
    <input type="radio" name="group3" value="N" />



    <input type="radio" name="group4" value="Y" />
    <input type="radio" name="group4" value="N" />



    <input type="radio" name="group5" value="Y" />
    <input type="radio" name="group5" value="N" />

    What I'm trying to do is validate each group of radio button must at least be selected as I don't want to put the default checked. I use the for loop base on the form elements length as below:

    len = frm.elements.length
    for (i=0;i<len ;i++ ){
    if (frm.elements[i].type=="radio" && frm.elements[i].checked) {
    alert("you choose " + frm.elements[i].value);
    radio_choice = true;
    break;
    }
    if (!radio_choice){

    alert("Please select an option.")
    frm.elements[i].focus();
    return false

    }

    But it failed to achieve what I want, kindly advise......

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    well, if you have 5 groups of radio buttons, then in the end you wnat 5 buttons checked, right?


    so in you loop have it do as so:


    Code:
    var len = document.frm.elements.length
    var checksvalid='0';
    for (i=0;i<len ;i++ ){
    if (frm.elements[i].type=="radio" && frm.elements[i].checked) { 
    alert("you choose " + frm.elements[i].value);
    checksvalid++;
    
    }
    if (checksvalid!='5'){
    alert("You only selected "+checksvalid+" option(s), please select an option from all categories.");
    document.frm.elements[i].focus();
    return false;
    }else{return true;}
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    317
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Failed to achieve what I want

    Hi,
    No, it can't solve my problem as what I want is validate the radio button in sequences, if group1 didn't "checked" and proceed to group2, then it will prompt the alert message.

    The sample code that you provide actually it same as mine whereby what it does is it will check every single elements of the radio button and prompt the alert message whenever there has no checked. For example:if none of the radio button group is checked, then it will prompt me 10 times instead of 5 times. So, the document.frm.elements[i].focus() will also incorrect.

    Kindly advise......

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Try this. It should do the trick:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function valid(e){
    for(var i=0;i<e.length;i++){
    	if(e[i].type=='radio'){
    	var r=e[e[i].name], q=true
    		for(var j=0;j<r.length;j++){
    		r[j].checked?q=false:null;
    		}
    	if(q){alert('Please select an option in each group');return false}
    	}
    }
    }
    </script>
    </head>
    <body>
    <form action="" onsubmit="return valid(this.elements)">
    <input type="radio" name="group1" value="Y" />
    <input type="radio" name="group1" value="N" />
    <br>
    <input type="radio" name="group2" value="Y" />
    <input type="radio" name="group2" value="N" />
    <br>
    <input type="radio" name="group3" value="Y" />
    <input type="radio" name="group3" value="N" />
    <br>
    <input type="radio" name="group4" value="Y" />
    <input type="radio" name="group4" value="N" />
    <br>
    <input type="radio" name="group5" value="Y" />
    <input type="radio" name="group5" value="N" />
    <br>
    <br>
    <input type="submit" name="subm" value="Submit">
    </form>
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    sorry about that. wow, my brain took a major leap off a cliff there. lol
    even though kor's solution is shorter and allows for further additions of more radio buttons
    here is what i think you wanted.
    Code:
    <html>
    <head>
    
    <script type=text/javascript>
    function checkit(){
    var totalpairs='5';
    var notvalid='0';
    var spans=document.getElementById('frm').getElementsByTagName('span');
    var j='0';
    while(j<spans.length){spans[j].style.backgroundColor='';j++;}
    
    for (i=1;i<=totalpairs ;i++ ){
    var name='group'+i;
    var radiogroup=document.getElementsByName(name);
      if(!(radiogroup[0].checked || radiogroup[1].checked)){
      notvalid++;
      radiogroup[0].parentNode.style.backgroundColor='orange';
      break;
      }
    }
    if(notvalid!='0'){alert('Please make a selection in the highlighted group(s)'); return false;}
    else{return true;}
    }
    </script>
    </head>
    
    <body>
    <form name=frm id=frm onsubmit="return checkit();">
    <span>
    <input type="radio" name="group1" value="Y" />
    <input type="radio" name="group1" value="N" />
    </span>
    <br>
    <span>
    <input type="radio" name="group2" value="Y" />
    <input type="radio" name="group2" value="N" />
    </span>
    <br>
    <span>
    <input type="radio" name="group3" value="Y" />
    <input type="radio" name="group3" value="N" />
    </span>
    <br>
    <span>
    <input type="radio" name="group4" value="Y" />
    <input type="radio" name="group4" value="N" />
    </span>
    <Br>
    <span>
    <input type="radio" name="group5" value="Y" />
    <input type="radio" name="group5" value="N" />
    </span>
    <br>
    <input type=button onclick=checkit()>
    </form>
    </body>
    </html>
    Last edited by brandonH; 12-04-2006 at 10:17 AM.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Posts
    317
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem solved

    Thanks so much for all the reply. All the solutions are workable.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •