dawgmom
Technical User
- Jun 2, 2008
- 1
Hi. I'm no pro at JS, but most times can muck my way though tweaking exsisting code - except for this. I need to validate a set of radio buttons on a form:
<input type="radio" name="radio" id="yes" value="pickup" onBlur="trim('pickup')" />
Yes.</td>
<td width="55%"><input type="radio" name="radio" id="usps" value="no" onBlur="trim('usps')" />
No.</td>
I found this JS Validation Code online but it only validates text fields, not radio buttons:
function $$(id) {
try {
var tmp = document.getElementById(id).value;
}
catch(e) {
alert("Field " + id + " does not exist!\nvalidation is configured on a field with no ID");
return false;
}
if(tmp == "") {
alert("Field " + id + " cannot be empty");
return false;
}
return tmp;
}
var required = {
field : [],
add : function(name, type) {
this.field[this.field.length] = [name,type];
},
out : function() {
return this.field;
}
}
var validate = {
check : function() {
var tmp;
// loop all required fields
for(var i=0; i<required.field.length; i++) {
// check the form field exists
this.tmp = $$(required.field[0]);
if(this.tmp) {
if(this.checkit(required.field[0],required.field[1])) {
// validated okay
} else {
alert("Field "+required.field[0]+" not valid\n");
document.getElementById(required.field[0]).focus();
return false;
}
} else {
try {
document.getElementById(required.field[0]).focus();
} catch(e) { }
return false;
}
} // for
return true;
},
checkit : function(value,type) {
exp : '';
switch(type) {
case "NOT_EMPTY":
if(this.trim($$(value)).length < 1) { return false; } else { return true; }
break;
case "ALPHA":
exp = /^[A-Za-z]+$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "ALPHASPACE":
exp = /^[A-Za-z ]+$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "NUMERIC":
exp = /^[0-9]+$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "NUMERICPLUS":
exp = /(^-*\d+$)|(^-*\d+\.\d+$)/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "ALPHANUM":
exp = /^[a-zA-Z0-9]+$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "ALPHANUMSPACE":
exp = /^[a-zA-Z0-9 ]+$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "EMAIL":
exp = /^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "YYYYMMDD":
exp = /^(19|20)[0-9][0-9][- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "DDMMYYYY":
exp = /^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)[0-9][0-9]$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "MMDDYYYY":
exp = /^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)[0-9][0-9]$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
default:
exp = new RegExp(type);
if($$(value).match(exp)==null) { return false; } else { return true; }
} // switch
},
trim : function(s) {
return s.replace(/^\s+/, '').replace(/\s+$/, '');
}
}
function $val(id) {
return document.getElementById(id);
}
function trim(id) {
$val(id).value = $val(id).value.replace(/^\s+/, '').replace(/\s+$/, '');
}
Can someone please, please, please tell me what and where to add the validation for radio buttons? Should my form include 'onBlur' for radio buttons? BTW, I'm using PHP to process the form. Thanks so much.
<input type="radio" name="radio" id="yes" value="pickup" onBlur="trim('pickup')" />
Yes.</td>
<td width="55%"><input type="radio" name="radio" id="usps" value="no" onBlur="trim('usps')" />
No.</td>
I found this JS Validation Code online but it only validates text fields, not radio buttons:
function $$(id) {
try {
var tmp = document.getElementById(id).value;
}
catch(e) {
alert("Field " + id + " does not exist!\nvalidation is configured on a field with no ID");
return false;
}
if(tmp == "") {
alert("Field " + id + " cannot be empty");
return false;
}
return tmp;
}
var required = {
field : [],
add : function(name, type) {
this.field[this.field.length] = [name,type];
},
out : function() {
return this.field;
}
}
var validate = {
check : function() {
var tmp;
// loop all required fields
for(var i=0; i<required.field.length; i++) {
// check the form field exists
this.tmp = $$(required.field[0]);
if(this.tmp) {
if(this.checkit(required.field[0],required.field[1])) {
// validated okay
} else {
alert("Field "+required.field[0]+" not valid\n");
document.getElementById(required.field[0]).focus();
return false;
}
} else {
try {
document.getElementById(required.field[0]).focus();
} catch(e) { }
return false;
}
} // for
return true;
},
checkit : function(value,type) {
exp : '';
switch(type) {
case "NOT_EMPTY":
if(this.trim($$(value)).length < 1) { return false; } else { return true; }
break;
case "ALPHA":
exp = /^[A-Za-z]+$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "ALPHASPACE":
exp = /^[A-Za-z ]+$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "NUMERIC":
exp = /^[0-9]+$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "NUMERICPLUS":
exp = /(^-*\d+$)|(^-*\d+\.\d+$)/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "ALPHANUM":
exp = /^[a-zA-Z0-9]+$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "ALPHANUMSPACE":
exp = /^[a-zA-Z0-9 ]+$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "EMAIL":
exp = /^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "YYYYMMDD":
exp = /^(19|20)[0-9][0-9][- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "DDMMYYYY":
exp = /^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)[0-9][0-9]$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
case "MMDDYYYY":
exp = /^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)[0-9][0-9]$/;
if($$(value).match(exp)==null) { return false; } else { return true; }
break;
default:
exp = new RegExp(type);
if($$(value).match(exp)==null) { return false; } else { return true; }
} // switch
},
trim : function(s) {
return s.replace(/^\s+/, '').replace(/\s+$/, '');
}
}
function $val(id) {
return document.getElementById(id);
}
function trim(id) {
$val(id).value = $val(id).value.replace(/^\s+/, '').replace(/\s+$/, '');
}
Can someone please, please, please tell me what and where to add the validation for radio buttons? Should my form include 'onBlur' for radio buttons? BTW, I'm using PHP to process the form. Thanks so much.