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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Problem with Radio Button Validation

    The code works, but only to checks to see if the first radio button is checked in the group.

    I know something like this works:

    Code:
    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;
    		}
    
    			}
    		}
    	}

    But I'm working with a different base code and I'm having a hard time getting it to work with the current code layout/structure.

    Here is the specific chunk (the part I need to work is the "case 'radio':....":
    Code:
    // loop over required fields
    			for(var i=0;i<reqfields.length;i++)
    			{
    		// check if required field is there
    				var f=document.getElementById(reqfields[i]);
    				if(!f){continue;}
    		// test if the required field has an error, 
    		// according to its type
    				switch(f.type.toLowerCase())
    				{
    					case 'text':
    						if(f.value=='' && f.id!='email'){cf_adderr(f)}							
    		// email is a special field and needs checking
    						if(f.id=='email' && !cf_isEmailAddr(f.value)){cf_adderr(f)}							
    					break;
    
    					case 'radio':
    						if(!f.checked){cf_adderr(f)}							
    					break;
    
    				}
    			}
    			return !document.getElementById(errorID);


    Here is the code in its entirety:

    Code:
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    	<title>Complex Form Example</title>
    	<style type="text/css">
    		#errormsg
    		{
    			border:2px solid #c00;
    			padding:5px;
    			width:20em;
    		}    
    		.error
    		{
    			background:#fcc;
    		}
        </style>
    	<script type="text/javascript">
    		function checkform(of)
    		{
    		// Test if DOM is available and there is an element called required
    			if(!document.getElementById || !document.createTextNode){return;}
    			if(!document.getElementById('required')){return;}
    
    		// Define error messages and split the required fields
    			var errorID='errormsg';
    			var errorClass='error'
    /* changes for linked list */
    			var errorMsg='Please enter or change the following fields:';
    /* end changes for linked list */
    			var errorImg='images/error.gif';
    			var errorAlt='Error';
    			var errorTitle='This field has an error!';
    			var reqfields=document.getElementById('required').value.split(',');
    
    		// Cleanup old mess
    			// if there is an old errormessage field, delete it
    			if(document.getElementById(errorID))
    			{
    				var em=document.getElementById(errorID);
    				em.parentNode.removeChild(em);
    			}
    			// remove old images and classes from the required fields
    			for(var i=0;i<reqfields.length;i++)
    			{
    				var f=document.getElementById(reqfields[i]);
    				if(!f){continue;}
    				if(f.previousSibling && /img/i.test(f.previousSibling.nodeName))
    				{
    					f.parentNode.removeChild(f.previousSibling);
    				}
    				f.className='';
    			}
    		// loop over required fields
    			for(var i=0;i<reqfields.length;i++)
    			{
    		// check if required field is there
    				var f=document.getElementById(reqfields[i]);
    				if(!f){continue;}
    		// test if the required field has an error, 
    		// according to its type
    				switch(f.type.toLowerCase())
    				{
    					case 'text':
    						if(f.value=='' && f.id!='email'){cf_adderr(f)}							
    		// email is a special field and needs checking
    						if(f.id=='email' && !cf_isEmailAddr(f.value)){cf_adderr(f)}							
    					break;
    
    					case 'radio':
    						if(!f.checked){cf_adderr(f)}							
    					break;
    
    				}
    			}
    			return !document.getElementById(errorID);
    
    			/* Tool methods */
    			function cf_adderr(o)
    			{
    				// create image, add to and colourise the error fields
    				var errorIndicator=document.createElement('img');
    				errorIndicator.alt=errorAlt;
    				errorIndicator.src=errorImg;
    				errorIndicator.title=errorTitle;
    				o.className=errorClass;
    				o.parentNode.insertBefore(errorIndicator,o);
    
    			// Check if there is no error message
    				if(!document.getElementById(errorID))
    				{
    				// create errormessage and insert before submit button
    					var em=document.createElement('div');
    					em.id=errorID;
    					var newp=document.createElement('p');
    					newp.appendChild(document.createTextNode(errorMsg))
    					em.appendChild(newp);
    /* added for linked list */
    					var newul=document.createElement('ul');		
    					em.appendChild(newul);
    /* end added for linked list */
    					// find the submit button 
    					for(var i=0;i<of.getElementsByTagName('input').length;i++)
    					{
    						if(/submit/i.test(of.getElementsByTagName('input')[i].type))
    						{
    							var sb=of.getElementsByTagName('input')[i];
    							break;
    						}
    					}
    					if(sb)
    					{
    						sb.parentNode.insertBefore(em,sb);
    					}	
    				} 
    /* added for linked list */
    				var em=document.getElementById(errorID).getElementsByTagName('ul')[0];
    				var newli=document.createElement('li');
    				var newa=document.createElement('a');
    				for(var i=0;i<of.getElementsByTagName('label').length;i++)
    				{
    					if(of.getElementsByTagName('label')[i].htmlFor==o.id)
    					{
    						var txt=of.getElementsByTagName('label')[i].firstChild.nodeValue;
    						break;
    					}
    				}
    	
    				newa.appendChild(document.createTextNode(txt));
    				newa.href='#'+f.id;
    				newa.onclick=function()
    				{
    					var loc=this.href.match(/#(\w.+)/)[1];
    					document.getElementById(loc).focus();
    					return false;
    				}
    				newli.appendChild(newa);
    				em.appendChild(newli);
    /* end added for linked list */
    			}
    			function cf_isEmailAddr(str) 
    			{
    			    return str.match(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/);
    			}
    		}
        </script>
    </head>
    <body>
    <form action="formsend.php" method="post" onsubmit="return checkform(this);">
    	<p>
    		<input type="hidden" name="required" id="required" value="q1,q2,q3" />
    		<input type="radio" name="q1" id="q1" value="q1_0" />One
            <input type="radio" name="q1" id="q1" value="q1_1" />Two
            <input type="radio" name="q1" id="q1" value="q1_1" />Three
            <input type="radio" name="q1" id="q1" value="q1_1" />Four
    	</p>
        
         <p>
    		<input type="radio" name="q2" id="q2" value="q2_0" />One
            <input type="radio" name="q2" id="q2" value="q2_1" />Two
    	</p>
        
         <p>
    		<input type="radio" name="q3" id="q3" value="q3_0" />One
            <input type="radio" name="q3" id="q3" value="q3_1" />Two
    	</p>
    
    
    	<p>
    		<input type="submit" value="Send" />
    	</p>
    </form>
    </body>
    </html>

    I've tried a dozen methods and couldn't get it to work, I know it's a fairly easy fix, but I'm going cross eyed, any help is much appreciated, THANKS
    Last edited by hey_suburbia; 10-09-2008 at 10:44 PM. Reason: wrapped code in [code] tags

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by hey_suburbia View Post
    The code works, but only to checks to see if the first radio button is checked in the group.
    All ID attributes must be unique.

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Something like this maybe?

    Code:
    case 'radio':
        var group=document.forms['yourformname'].elements[f.name];
        var len=group.length;
        var Flg=true;
        for(var i=0;i<len;i++){
            if(group[i].checked){
                Flg=false;
            }
        }
        if(Flg){
            //none of the radio buttons for the group were checked
        }
    break;
    Just give the first radio an id.
    Helping to build a bigger box. - Adam Matthews

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    In your final code I'm having trouble seeing if the functions are complete or nested.
    For example, in the following should there be a '}' after the 'return' statement?

    PHP Code:
                return !document.getElementById(errorID);

                
    /* Tool methods */
                
    function cf_adderr(o


  •  

    Tags for this Thread

    Posting Permissions

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