Add validation to form

ladyittech · Sep 9, 2007

I have a JavaScript form validation that I picked up off the Internet and modified to pick out two required fields. My client wants to require a radio button as well, but I cannot find instructions or examples for adding code to an existing script that is activated onsubmit. Here is the script I need to add the radio button validation to... I have 3 radio buttons named "community".

Sidenote: I've taken two courses in JavaScript in college and own about 10 reference and training books and none of them explain how to put together unique combinations of JavaScript Validations. Does anyone have a resource where I can learn to create form validations that have different combinations of elements in the validation process?

Thanks,

This is my test code before I can put it on my client's web page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Javascript Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="noindex,follow" />

<script language="JavaScript" type="text/javascript">

// Javascript validation functions
//

http://www.designplace.org/

//function to check empty fields

function isEmpty(strfield1) {

//change "field1, field2 and field3" to your field names
strfield1 = document.forms[0].myname.value

//name field
if (strfield1 == "" || strfield1 == null || !isNaN(strfield1) || strfield1.charAt(0) == ' ')
{
alert("\"Your Name\" is a required field.\nPlease enter your name.")
return false;
}

return true;
}

//function to check valid email address
function isValidEmail(strEmail){
validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
strEmail = document.forms[0].myemail.value;

// search email text for regular exp matches
if (strEmail.search(validRegExp) == -1)
{
alert('A valid e-mail address is required.\nPlease enter a valid e-mail address.');
return false;
}
return true;
}

//function that performs all functions, defined in the onsubmit event handler

function check(form){
if (isEmpty(form.myname)){
if (isEmpty(form.field2)){
if (isEmpty(form.field3)){
if (isValidEmail(form.myemail)){
return true;
}
}
}
}
return false;
}

</script>
</head>

<body bgcolor="#ECECEC" text="#000000">
<h3>Form validation with JavaScript</h3>
<form name="myform" method="post" action="#" onSubmit="return check(this);">
Field 1: (required!)<br />
<input name="myname" type="text" /><br />
E-Mail Address (required!)<br>
<input name="myemail" type="text" id="email" />
<br />
<input type="radio" value="1st value" name="community" />1st<br />
<input type="radio" value="2nd value" name="community" />2nd<br />
<input type="radio" value="3rd value" name="community" />3rd<br />

<input name="submit" type="submit" />
</form>

<p><a href="javascript:self.close();">Close window</a><br>
<br>
<a href="

http://www.designplace.org/">http://www.designplace.org/</a></p>

</body>
</html>

j4606 · Sep 9, 2007

How about this.

Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Javascript Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="noindex,follow" />


<script language="JavaScript" type="text/javascript">


function isEmpty(strfield1) {
	strfield1 = document.forms[0].myname.value
	if (strfield1 == "" || strfield1 == null || !isNaN(strfield1) || strfield1.charAt(0) == ' '){
		alert("\"Your Name\" is a required field.\nPlease enter your name.")
		return false;
	}
	return true;
}

function isValidEmail(strEmail){
  validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
  strEmail = document.forms[0].myemail.value;

   // search email text for regular exp matches
    if (strEmail.search(validRegExp) == -1)
   {
      alert('A valid e-mail address is required.\nPlease enter a valid e-mail address.');
      return false;
    }
    return true;
}

function check(form){
	if(checkRadioButton()&& (isEmpty(form.myname)) && (isValidEmail(form.myemail)) ){
		return true;
	}
	return false;
}

function checkRadioButton(){
	var radioObj = document.getElementsByName('community');
	for(var i = 0; i < radioObj.length; i++){
		if(radioObj[i].checked == true){return true;}
	}
	alert("\"Community\" are required radio buttons.")
	return false;
}

</script>
</head>

<body bgcolor="#ECECEC" text="#000000">
<h3>Form validation with JavaScript</h3>
<form name="myform" method="post" action="#" onSubmit="return check(this);">
  Field 1: (required!)<br />
<input name="myname" type="text" /><br />
  E-Mail Address (required!)<br>
  <input name="myemail" type="text" id="email" />
  <br />
<input type="radio" value="1st value" name="community" />1st<br />
<input type="radio" value="2nd value" name="community" />2nd<br />
<input type="radio" value="3rd value" name="community" />3rd<br />

<input name="submit" type="submit" />
</form>

<p><a href="javascript:self.close();">Close window</a><br>
  <br>
  <a href="[URL unfurl="true"]http://www.designplace.org/">http://www.designplace.org/</a></p>[/URL]
</body>
</html>

Also if you can not find radio button validation in those ten reference books you might need to burn them and get new ones.
Or simply google "radio button validation tutorial"

http://www.google.com/search?hl=en&q=radio+button+validation+tutorial&btnG=Google+Search

j4606 · Sep 9, 2007

Oh sorry i misread your post.

Does anyone have a resource where I can learn to create form validations that have different combinations of elements in the validation process?

Just look at your code and follow its logic. The code you posted has a 3 functions isValidEmail, isEmpty, and check.
You can see that isValidEmail checks the email and isEmpty checks to see that a form field(input textbox) is not empty null or numeric. Now those two functions (isempty and isValidEmail) are part of your third funtion "check".

Check is called on submit and calls your two validation functions. All u need to do to add more validations and follow the logic already in place in your script and keep adding functions that will validation differnt parts of your form to the check function.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Add validation to form

ladyittech

Technical User

j4606

MIS

j4606

MIS

Similar threads

Part and Inventory Search

Sponsor