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

    Radio Button Validation

    Hello, i'm working on a form. The one thing i can't get to work is the following:

    When a radio button "creditcard" is checked, the form can only be submitted if the age in the textfield(on the top of the page, textfield "leeftijd") is over 18.

    I hope someone can help me with this..
    Thanks in advance

    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>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="css/main.css" media="all" />
         <script type="text/javascript">
    		function formValidator(){
    		
    				// Make quick references to our fields
    				var voornaam = document.getElementById('voornaam');
    				var achternaam = document.getElementById('achternaam');
    				var woonplaats = document.getElementById('woonplaats');
    				var leeftijd = document.getElementById('leeftijd');
    				var email_adres = document.getElementById('email_adres');
    				var krant = document.getElementById('krant');
    				
    					// Check each input in the order that it appears in the form!
    					if(isAlphabet(voornaam, "Voer je naam in!")){
    					if(isAlphabet(achternaam, "Voer je achternaam in!")){
    					if(isAlphabet(woonplaats, "Voer je woonplaats in!")){
    					if(isNumeric(leeftijd, "Voer je leeftijd in!")){
    					if(emailValidator(email_adres, "Voer je email adres in!")){
    					if(madeSelection(krant, "Maak een keuze!")){				
    				return true;
    								}
    							}
    						}
    					}
    				}
    			}
    		return false;	
    	}
    			
    		
    		
    		
    		
            function notEmpty(elem, helperMsg){
    	if(elem.value.length == 0){
    		alert(helperMsg);
    		elem.focus(); // set the focus to this input
    		return false;
    	}
    	return true;
    }
    
    function isNumeric(elem, helperMsg){
    	var numericExpression = /^[0-9]+$/;
    	if(elem.value.match(numericExpression)){
    		return true;
    	}else{
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}
    }
    
    function isAlphabet(elem, helperMsg){
    	var alphaExp = /^[a-zA-Z]+$/;
    	if(elem.value.match(alphaExp)){
    		return true;
    	}else{
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}
    }
    
    function isAlphanumeric(elem, helperMsg){
    	var alphaExp = /^[0-9a-zA-Z]+$/;
    	if(elem.value.match(alphaExp)){
    		return true;
    	}else{
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}
    }
    
    function lengthRestriction(elem, min, max){
    	var uInput = elem.value;
    	if(uInput.length >= min && uInput.length <= max){
    		return true;
    	}else{
    		alert("Please enter between " +min+ " and " +max+ " characters");
    		elem.focus();
    		return false;
    	}
    }
    
    function madeSelection(elem, helperMsg){
    	if(elem.value == "Maak een keuze!"){
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}else{
    		return true;
    	}
    }
    
    function emailValidator(elem, helperMsg){
    	var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    	if(elem.value.match(emailExp)){
    		return true;
    	}else{
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}
    }
            </script>
    
            
    	</head>
    
    	<body>
    		<div id="container">
    	
    			<h1>Aanmeldingsformulier</h1>
    			<form  id="aanmelding" action="bevestiging.html" method="get" onsubmit="return formValidator()">
    			
    			<!--
    			-
    			- NAW fieldset
    			- 
    			-->
    			
    			<fieldset id="nawfieldset">
    				<legend>
    					persoonlijke gegevens
    				</legend>
    			
    				<div>
    					<label for="voornaam">
    						voornaam
    					</label>
    					<input type="text" name="voornaam" id="voornaam" value="" />
    					<span class="required" id="voornaam_message">
    					*
    					</span>
    				</div>
    				
    				<div>
    					<label for="achternaam">
    						achternaam
    					</label>
    					<input type="text" name="achternaam" id="achternaam" value="" />
    					<span class="required" id="achternaam_message">
    					*
    					</span>
    				</div>
    				
    				<div>
    					<label for="woonplaats">
    						woonplaats
    					</label>
    					<input type="text" name="woonplaats" id="woonplaats" value="" />
    					<span class="required" id="woonplaats_message">
    					*
    					</span>
    				</div>
    				
    				<div>
    					<label for="leeftijd">
    						leeftijd
    					</label>
    					<input type="text" name="leeftijd" id="leeftijd" value="" size="2" maxlength="2" />
    					<span class="required" id="leeftijd_message">
    					*
    					</span>
    				</div>		  
    				
    				<div>
    					<label for="email_adres">
    						email adres
    					</label>
    					<input type="text" name="email_adres" id="email_adres" value="" />
    					<span class="required" id="email_adres_message">
    					*
    					</span>
    				</div>
    			
    			</fieldset>
    			
    			<!--
    			-
    			- abonnement fieldset
    			- 
    			-->
    			<fieldset id="abonnementfieldset">
    				<legend>
    					abonnement
    				</legend>
    				
    				<div>
    					<label for="krant">
    						krant
    					</label>
    					<select name="krant" id="krant">
    						<option value="--">Kies krant</option>
    						<option value="volkskrant">De Volkskrant</option>
    						<option value="telegraaf">De Telegraaf</option>
    						<option value="ad">Algemeen Dagblad</option>
    						<option value="trouw">Trouw</option>
    						<option value="nrc">NRC</option>
    					</select>
    					<span class="required" id="krant_message">
    					*
    					</span>
    				</div>
    				
    				<div>
    					<label>
    						Abonnement:
    					</label>
    					<span class="required" id="abonnement_message">
    					*
    					</span>					
    				</div>
    				
    				<div>
    					<label for="volledig">
    						Volledig:
    					</label>
    					<input type="radio" name="abonnement" id="volledig" value="volledig" />
    				</div>
    				
    				<div>
    					<label for="weekend">
    						Weekend:
    					</label>
    					<input type="radio" name="abonnement" id="weekend" value="weekend" />
    				</div>
    				
    				<div>
    					<label for="digitaal">
    						Digitaal:
    					</label>
    					<input type="radio" name="abonnement" id="digitaal" value="1" onclick="choice(this)"/>
    <script type="text/javascript">
    function choice(t){
    	var a = ['Geen Bezorging'];
    	s = document.getElementById('bezorgwijze');
    	var sl = s.options.length;
    	for(var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
    	if(t.value != 0){
    		var z;
    		switch (t.value) {
    			case '1' : z = a; break;
    			default : alert('Invalid entry'); break;
    		}
    		var l = z.length;
    		for(i = 0; i < l; i++ ) { s.options[i] = new Option(z[i],z[i],false,false); }
    	}
    }
    
    </script>
    				</div>		  
    			
    			</fieldset>
    			
    			<!--
    			-
    			- bezorging en betaling
    			- 
    			-->
    			<fieldset id="bezorgingfieldset">
    				<legend>
    					bezorging en betaling
    				</legend>
    				
    				<div>
    					<label for="bezorgwijze">
    						bezorgwijze
    					</label>
    					<select name="bezorgwijze" id="bezorgwijze">
    						<option value="--">Kies bezorgwijze</option>
    						<option value="bezorger">Bezorger</option>
    						<option value="post">Per post</option>
    						<option value="geen">Geen bezorging</option>
    					</select>
    					<span class="required" id="bezorgwijze_message">
    					*
    					</span>						
    				</div>
    				
    				<div>
    					<label>
    						Betaalwijze:
    					</label>
    					<span class="required" id="betaalwijze_message">
    					*
    					</span>						
    				</div>
    				
    				<div>
    					<label for="acceptgiro">
    						Acceptgiro:
    					</label>
    					<input type="radio" name="betaalwijze" id="acceptgiro" value="acceptgiro" />
    				</div>
    				
    				<div>
    					<label for="creditcard">
    						Credit card:
    					</label>
    					<input type="radio" name="betaalwijze" id="creditcard" value="creditcard" />
    				</div>		  
    			
    			</fieldset>
    			
    			<fieldset>
    				<input type="submit" value="verstuur" />
    			</fieldset>
    			
    			</form>
    
    		</div>
    	</body>
    
    </html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,130
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb Consider this ...

    I'm not sure of the language used, but this should return the value (or index position) of the radio button set true.
    Code:
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
      return str;
    }
    I think you would call it in the validation section with:
    Code:
    if (getRBtnName("betaalwijze") == 'creditcard') { 
    // true section if radio button set
    }


  •  

    Posting Permissions

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