goldy30
New Member
- Messages
- 60
- Reaction score
- 0
- Points
- 0
With the way this script is I've tried to add in radio button validation but im unsure of this. It's all under gender... the id of the radio buttons is gender and I semi familiar with
[FONT=Verdana, Arial, Helvetica, sans-serif]if ( ( gender[0].checked == false ) && ( gender[1].checked == false ) ) { alert ( "Please choose your Gender: Male or Female" ); return false; }[/FONT]
But I'm not sure how to include it in the way this script is set out. I tried but got lost... still learning, would appreciate any help. Would also like to know how to include a check box validation in this form. Thanks~!
heres the form http://newdesigns.x10hosting.com/js_assessment/loggedin.htm
This js file; http://newdesigns.x10hosting.com/js_assessment/js/script.js
[FONT=Verdana, Arial, Helvetica, sans-serif]if ( ( gender[0].checked == false ) && ( gender[1].checked == false ) ) { alert ( "Please choose your Gender: Male or Female" ); return false; }[/FONT]
But I'm not sure how to include it in the way this script is set out. I tried but got lost... still learning, would appreciate any help. Would also like to know how to include a check box validation in this form. Thanks~!
heres the form http://newdesigns.x10hosting.com/js_assessment/loggedin.htm
This js file; http://newdesigns.x10hosting.com/js_assessment/js/script.js
HTML:
function Validate(){
// Creating variable for field names
var firstname = document.getElementById('firstname');
var addr = document.getElementById('addr');
var postcode = document.getElementById('postcode');
var state = document.getElementById('state');
var username = document.getElementById('username');
var email = document.getElementById('email');
var thedate = document.getElementById('txtDate');
var gender = document.getElementById('gender');
if(isAlphabet(firstname, "Please enter only letters for your name")){ // checks for alphabetical letters only
if (checkGender(gender, "Please choose your Gender: Male or Female" )){
if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){ // check for both alphabetic and numeric characters only
if(isNumeric(postcode, "Please enter a valid postcode code")){ // check for numeric characters only
if(madeSelection(state, "Please Choose a State")){// checks if a selection is made
if(lengthRestriction(username, 6, 8)){ // checks the username is between 6 and 8 characters
if(emailValidator(email, "Please enter a valid email address")){ //checks if is a valid email address
if(dateValidator(thedate,"Please enter valid date")){ // checks for valid date and correct format
return true;
}
}
}
}
}
}
}
}
return false;
}
// below are all the individual functions that test for valid input of each field in the forms
//checks that an element is not empty, this isnt used anywhere that I can see
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
//this one checks to make sure the inout is only numbers 0-9
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
//alert(elem.value)
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
//this one tests for letters, either uppercase or lowercase and will also allow a space since full name is asked for
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z\s]+$/;
//alert(elem.value)
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
//this one is used to test for letters and numbers and is used for the address
function isAlphanumeric(elem, helperMsg){
//alert(elem.value)
var alphaExp = /^[0-9a-zA-Z\s]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
//CHECKS IF USERNAME IS BETWEEN 6 - 8 CHARACTERS OTHERWISE WILL ALERT MESSAGE
function lengthRestriction(elem, min, max){
//alert(elem.value)
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;
}
}
//CHECKS IF A SELECTION HAS BEEN MADE FROM THE DROPDOWN LIST, IF IS PLEASE CHOOSE, WILL ALERT MESSAGE
function madeSelection(elem, helperMsg){
//alert(elem.value)
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
//GENDER VALIDATION //////////////////////////////////////////////////////////
function checkGender(elem, helperMsg){
//alert(elem.value)
if(gender[0].checked == false ) && (gender[1].checked == false){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
// CHECKS THAT A VALID EMAIL ADDRESS HAS BEEN FILLED IN
function emailValidator(elem, helperMsg){
//alert(elem.value)
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;
}
}
//CHECKS THAT THE CORRECT DATE AND FORMAT IS FILLED IN
function dateValidator(elem, helperMsg){
//alert(elem.value)
var dateExp = /^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$/ ;
if(elem.value.match(dateExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}