www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] javascript radio button validation

  1. #1
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356

    resolved [RESOLVED] javascript radio button validation

    I have a form that has 4 "required fields" that validate using JS. I am now trying to add a 5th "required field" (the difference is that this field is a "radio button input as opposed to a text input).

    I have it working so that when the 1st radio button is selected, the form will go through. However, when the 2nd radio button is selected, it comes up with the "please fill in all required fields" error.

    Here is the JS I have so far:
    Code:
    <script type="text/JavaScript">
    function verify() {
    	var Skill = document.indiv_reg.skill.value;
    	var Fname = document.indiv_reg.name.value;
    	var Hphn = document.indiv_reg.home_num.value;
    	var Email = document.indiv_reg.email.value;
    	var Tname = document.indiv_reg.tname.value;
    	
    	if ((Fname =="") || (document.indiv_reg.skill[0].checked =="") || (Hphn =="") || (Email =="") || (Tname =="")) {
    	alert('Please Fill Out ALL Required Fields');
    	}
    	else {
    	document.indiv_reg.submit();
    	}
    }
    </script>
    I tried adding the 2nd radio button value like this:
    Code:
    (document.indiv_reg.skill[0].checked =="") || (document.indiv_reg.skill[1].checked =="")
    But when I do that, then even when the 1st radio button is selected it comes up with the "please fill out all required fields error".

    Form:
    PHP Code:
    <?php
    Denotes a Required Field<br />
    <
    br />

                                    <
    form name="indiv_reg" method="GET" action="tourney_mailRedirect.php">
                                    
    Sport:<br />
                                    <
    input type="text" name="sport" value="'.$sport.'" readonly="readonly" /><br />
    <
    br />
                                    
    Tournament:<br />
                                    <
    input type="text" size="90" name="league" value="'.$league.'" readonly="readonly" /><br />
    <
    br />
                                    
                                    * 
    Please select preferred skill level:<br />
                                    <
    input type="radio" name="skill" value="recreational" /> Recreational<br />
                                    <
    input type="radio" name="skill" value="competitive" /> Competitive<br />
    <
    br />                                
                                    * 
    Name:<br />
                                    <
    input type="text" name="name"  /><br />
    <
    br />
                                    * 
    Team Name:<br />
                                    <
    input type="text" name="tname"  /><br />
    <
    br />                            
                                    
    Team Captain:<br />
                                    <
    input type="text" name="tcap"  /><br />
    <
    br />
                                    * 
    Home Phone:<br />
                                    <
    input type="text" name="home_num"  /><br />
    <
    br />
                                    
    Cell Phone:<br />

                                    <
    input type="text" name="cell_num"  /><br />
    <
    br />
                                    * 
    Email:<br />
    ?>
    Not sure what to to. Any help would be appreciated.

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    (document.indiv_reg.skill[0].checked ==true) || (document.indiv_reg.skill[1].checked ==true)

    OR as a boolean

    (document.indiv_reg.skill[0].checked) || (document.indiv_reg.skill[1].checked)

    You can also get value

    document.indiv_reg.skill[0].value, etc.

    ^_^

  3. #3
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356
    Thanks for the reply. In this section, I did this as you suggested:
    HTML Code:
    if ((Fname =="") || (Hphn =="") || (document.indiv_reg.skill[0].checked ==true) || (document.indiv_reg.skill[1].checked ==true) || (Email =="") || (Tname =="")) {
    BUT the problem is that it is not acting as a "required" field. When I submit the document without selecting 1 of the 2 radio buttons, the form goes through (I want it to come up with the "please select all fields" error if someone doesn't click on one of the radio buttons.

  4. #4
    Join Date
    Aug 2009
    Posts
    28
    If you want the message to display when neither radio button is checked, you might change it to:


    if ((Fname =="") || (Hphn =="") || (!document.indiv_reg.skill[0].checked && !document.indiv_reg.skill[1].checked) || (Email =="") || (Tname =="")) {

  5. #5
    Join Date
    Mar 2009
    Posts
    509
    Here's something you might build on--it requires that you wrap the radio buttons inside a container which will be their parent. I have included an entire simple HTML page so you can see how it works. Although this gives a true/false alert, you can easily change it into a function that returns true or false to indicate whether the user has indeed clicked one of the radio buttons.

    Code:
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title>Untitled Document</title>
    		<script type="text/javascript">
                    function zap(){
                        var x = document.getElementById('rset');
    		    var flag = false;
    		    var i;
    		    
    		    for(i = 0; i < x.childNodes.length; i++){
                           if( x.childNodes[i].tagName == 'INPUT'  && x.childNodes[i].checked){
                               flag = true;
                               break;
    		       }
                        }
                        alert(flag);
                    }
    
    
    
    
    
    
                     </script>
    	
    	</head>
    	<body>
    	<div id= "rset">
            <input type = "radio" name = "fred" /> First button<br />
    	<input type = "radio" name = "fred" /> second button<br />
    	<input type = "radio" name = "fred" /> third button<br />
    	</div>
    
    	<input type = "button" value = "Click to check if any of the radio buttons has been selected" onclick="zap()" />
    	
    	</body>
    </html>

  6. #6
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356
    Thanks for the replies guys. Below is what did it for me:

    HTML Code:
    <script type="text/JavaScript">
    function verify() {
    	var Skill = null;
    	var Fname = document.indiv_reg.name.value;
    	var Hphn = document.indiv_reg.home_num.value;
    	var Email = document.indiv_reg.email.value;
    	var Tname = document.indiv_reg.tname.value;
    	
    	if ((Fname =="") || (!document.indiv_reg.skill[0].checked && !document.indiv_reg.skill[1].checked) || (Hphn =="") || (Email =="") || (Tname =="")) {
    	alert('Please Fill Out ALL Required Fields');
    	}
    	else {
    	document.indiv_reg.submit();
    	}
    	
    
    }
    </script>

  7. #7
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by Tcobb View Post
    Here's something you might build on--it requires that you wrap the radio buttons inside a container which will be their parent.
    You don't need to wrap the radio buttons in a div.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <script type="text/javascript">
                function validateForm() {
                    var btnsRadio = document.getElementsByName('skill');
                    var isDataValid = true;
                    if(!areRadsChecked(btnsRadio)) {
                        alert('Please select a skill level');
                        isDataValid = false;
                    }
                    //do other form validation here
                    //then
                    return (isDataValid)? true : false;
                }
    
                function areRadsChecked(radBtns) {
                    //loop thru the radio buttons to ensure 1 is checked
                    var isRadBtnChecked = false;
                    for(i=0; i < radBtns.length; i++) {
                        if(radBtns[i].checked) {
                            isRadBtnChecked = true;
                            i = btnsRadio.length;  //break out of for loop cleanly
                        }
                    }
                    return (isRadBtnChecked)? true : false;
                }
            </script>
        </head>
        <body>
    
            <form id="myForm" action="#" method="post" onsubmit="return validateForm();">
                * Please select preferred skill level:<br />
                <input type="radio" name="skill" value="recreational" /> Recreational<br />
                <input type="radio" name="skill" value="competitive" /> Competitive<br />
                <input type="submit" value="Submit" />
            </form>
    
        </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles