...

View Full Version : Radio Button Validation



rqrik
03-19-2009, 04:04 PM
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


<!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>

jmrker
03-19-2009, 04:26 PM
I'm not sure of the language used, but this should return the value (or index position) of the radio button set true.


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:


if (getRBtnName("betaalwijze") == 'creditcard') {
// true section if radio button set
}
:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum