...

View Full Version : Validations Functions in form are not working



ᙡԐᙖ ௹1ᖇĹ
06-30-2011, 10:04 PM
I have been working on a JavaScript form with validation and I cant get it to work right. The form is supposed to validate the name, E-mail, Phone number, Password and confirmation, Drop-down selection, Question reply, yes and no radios, and 3 preferences check-boxes. It is also supposed to verify that the passwords match, not allow any letters or special characters in the phone number box, and remove the default text when a user clicks on the Name, E-mail, and Question reply boxes. I've been checking over the code for almost a month now and I can't figure out why it is not working. This is my entire code.

[CODE]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact</title>

<script type="text/javascript">
/* <![CDATA[ */

function onlyDigits(objtextbox)
{
var exp = /[^\d]/g;
objtextbox.value = objtextbox.value.replace(exp,"");
}

function textdisappear(txt)
{
if (txt.value == txt.defaultValue)
{
txt.value = ""
}
function passmatch() {
if (document.forms[0].psswrd2.value
!= document.forms[0].psswrd1.value) {
window.alert("You did not enter the same password!");
document.forms[0].psswrd1.focus();
}
function validate()
{
var name = document.form1.Name;
var email = document.form1.Email;
var phone = document.form1.Telephone;
var question = document.form1.selection;
var reply = document.form1.questionreply
var word1 = document.form1.psswrd1
var word2 = document.form1.psswrd2
var chkradio = false;
var chkbox = false;

if (name.value == "")
{
window.alert("Name please.");
name.focus();
return false;
}

if (email.value == "")
{
window.alert("E-mail is blank.");
email.focus();
return false;
}
if (email.value.indexOf("@", 0) < 0)
{
window.alert("Enter valid e-mail please.");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
window.alert("Enter valid e-mail please.");
email.focus();
return false;
}

if ((phone.value == ""))
{
window.alert("Telephone number please.");
phone.focus();
return false;
}
if (word1.value == "")
{
window.alert("Password please.");
word1.focus();
return false;
}
if (word2.value == "")
{
window.alert("Re-type password please.");
word2.focus();
return false;
}
if (question.selectedIndex < 1)
{
alert("Choose question please.");
question.focus();
return false;

}
if (reply.value == "" || reply.value == "Question reply")
{
window.alert("Question reply please.");
reply.focus();
return false;
}



for (var i=0; i<2; ++i) {

if (document.form1.confirmreply.checked == true) {

chkradio = true;

break;

}

if (chkradio != true) {

window.alert("Yes or no please.");
confirmrelpy.focus();
return false;
}

for (var i=0; i<3; ++i) {

if (document.form1.hobby.checked == true) {

chkbox = true;

break;

}

if (chkbox != true) {

window.alert("Choose preference.");
hobby.focus();
return false;

}

return true;

}




/* ]]> */
</script>
</head>

<body>

<center><h1>Contact</h1></center>
<form method="post" action="mailto:someemail@somedomain.com"
name="form1" onsubmit="return validate();">
<h3>Your Details</h3>
<p>Name:* <input type="text" name="Name" value="Enter Name" onfocus="textdisappear(this)" ></p>
<p>E-mail:* <input type="text" name="Email" value="Enter E-mail" onfocus="textdisappear(this)" ></p>
<p>Phone Number:* <input type="text" name="Telephone" onkeyup="onlyDigits(this)"><br>
<br />

<h3>Password and Secret Question</h3>
Password:<br />
<input type="password" name="psswrd1" value="" />*<br />
Confirm:<br />
<input type="password" name="psswrd2" value="" onblur="passmatch()" />*<br />
<p>Choose a question:*<br />
<select type="text" value="" name="selection">
<option> </option>
<option>Where was your elementary school?</option>
<option>Who was the first person you ever kissed?</option>
<option>What was your first car?</option>
<option>Who is your favorite author?</option>
</select><br />

reply<br />
<input type="text" name="questionreply" value="Question reply" onfocus="textdisappear(this)" />*<br />

<h3>Offers</h3>
Do you want any special offers sent to you?*<br />
Yes<input type="radio" name="confirmreply" value="Yes"/>No<input type="radio" name="confirmreply" value="No" />

<h3>Which preference do you have?*</h3>
<input type="checkbox" name="hobby" value="check"/>Inside Activities<br />
<input type="checkbox" name="hobby" value="check"/>Outside Activities<br />
<input type="checkbox" name="hobby" value="check"/>Both<br />
<br />
<p><input type="submit" value="Submit" name="submit" />
<input type="reset" value="Reset" name="reset"></p>
</form>

</body>
</html>
[CODE]

AndrewGSW
06-30-2011, 11:20 PM
This

function textdisappear(txt)
{
if (txt.value == txt.defaultValue)
{
txt.value = ""
}
doesn't have a closing bracket }. Unless it's supposed to enclose all the other code (I assume not?), in which case there is a missing bracket further down somewhere.

ᙡԐᙖ ௹1ᖇĹ
06-30-2011, 11:28 PM
Hi Andrew,

Are you saying I should write it like this...

function textdisappear(txt)
{
if (txt.value == txt.defaultValue)
{
txt.value = ""
}
}

AndrewGSW
06-30-2011, 11:28 PM
You may have a missing bracket elsewhere as well but it's difficult to tell without proper indenting ;)

You might need to check your CDATA tags as well, but I haven't checked them myself. You could remove them :thumbsup:

AndrewGSW
06-30-2011, 11:31 PM
Hi Andrew,

Are you saying I should write it like this...


function textdisappear(txt) {
if (txt.value == txt.defaultValue) {
txt.value = ""
}
}
More like this.

ᙡԐᙖ ௹1ᖇĹ
07-01-2011, 12:27 AM
#
okay, so I took your advice and cleaned up my code and I did find and correct some errors. Now everything is working as it should be, EXCEPT when you get to the check yes or no radio buttons I get the "Click yes or no" message and the form tries to send without validating. I just need to figure out what's stopping the radio buttons from being validated. The code for the check boxes is similar, so I probably have an error there as well. Can anyone tell me help me understand what I did wrong? Below is the newest code...



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact</title>

<script type="text/javascript">

function onlyDigits(objtextbox) {
var exp = /[^\d]/g;
objtextbox.value = objtextbox.value.replace(exp,"");
}


function textdisappear(txt) {
if (txt.value == txt.defaultValue) {
txt.value = ""
}
}

function passmatch() {
if (document.forms[0].psswrd2.value
!= document.forms[0].psswrd1.value) {
window.alert("You did not enter the same password!");
document.forms[0].psswrd1.focus();
}
}

function validate()
{
var name = document.form1.names;
var email = document.form1.emails;
var phone = document.form1.Telephone;
var question = document.form1.selection;
var reply = document.form1.questionreply
var word1 = document.form1.psswrd1
var word2 = document.form1.psswrd2
var chkradio = false;
var chkbox = false;

if (name.value == "" || name.value == "Enter Name") {
window.alert("Name please.");
name.focus();
return false;
}

if (email.value == "" || email.value == "Enter E-mail") {
window.alert("E-mail is blank.");
email.focus();
return false;
}

if (email.value.indexOf("@", 0) < 0) {
window.alert("Enter valid e-mail please.");
email.focus();
return false;
}

if (email.value.indexOf(".", 0) < 0) {
window.alert("Enter valid e-mail please.");
email.focus();
return false;
}

if (phone.value == "") {
window.alert("Telephone number please.");
phone.focus();
return false;
}

if (word1.value == "") {
window.alert("Password please.");
word1.focus();
return false;
}

if (word2.value == "") {
window.alert("Re-type password please.");
word2.focus();
return false; }

if (question.selectedIndex < 1) {
alert("Choose question please.");
question.focus();
return false; }

if (reply.value == "" || reply.value == "Question reply") {
window.alert("Question reply please.");
reply.focus();
return false; }



for (var i=0; i<2; ++i) {

if (document.form1.confirmreply.checked == true) {
chkradio = true;
break; }
}

if (chkradio != true) {

window.alert("Yes or no please.");
confirmrelpy.focus();
return false; }

for (var i=0; i<3; ++i) {

if (document.form1.hobby.checked == true) {

chkbox = true;

break; }
}
if (chkbox != true) {

window.alert("Choose preference.");
hobby.focus();
return false; }

return true; }

</script>
</head>

<body>

<center><h1>Contact</h1></center>
<form method="post" action="mailto:someemail@somedomain.com"
name="form1" onsubmit="return validate();">
<h3>Your Details</h3>
<p>Name:* <input type="text" name="names" value="Enter Name" onfocus="textdisappear(this)" ></p>
<p>E-mail:* <input type="text" name="emails" value="Enter E-mail" onfocus="textdisappear(this)" ></p>
<p>Phone Number:* <input type="text" name="Telephone" onkeyup="onlyDigits(this)"><br>
<br />

<h3>Password and Secret Question</h3>
Password:<br />
<input type="password" name="psswrd1" value="" />*<br />
Confirm:<br />
<input type="password" name="psswrd2" value="" onblur="passmatch()" />*<br />
<p>Choose a question:*<br />
<select type="text" value="" name="selection">
<option> </option>
<option>Where was your elementary school?</option>
<option>Who was the first person you ever kissed?</option>
<option>What was your first car?</option>
<option>Who is your favorite author?</option>
</select><br />

reply<br />
<input type="text" name="questionreply" value="Question reply" onfocus="textdisappear(this)" />*<br />

<h3>Offers</h3>
Do you want any special offers sent to you?*<br />
Yes<input type="radio" name="confirmreply" value="Yes"/>No<input type="radio" name="confirmreply" value="No" />

<h3>Which preference do you have?*</h3>
<input type="checkbox" name="hobby" value="check"/>Inside Activities<br />
<input type="checkbox" name="hobby" value="check"/>Outside Activities<br />
<input type="checkbox" name="hobby" value="check"/>Both<br />
<br />
<p><input type="submit" value="Submit" name="submit" />
<input type="reset" value="Reset" name="reset"></p>
</form>

</body>
</html>

devnull69
07-01-2011, 06:44 AM
Please use the [ code ] and [ /code ] tags (without the spaces) or the octathorpe "#" symbol on top of the reply textarea to post code with proper indentation

ᙡԐᙖ ௹1ᖇĹ
07-01-2011, 01:24 PM
okay, I edited it with the # symbol at the top and put in those tags like you asked me to. Sorry, I am new to this forum and JavaScript. Can anyone please tell me why the code won't work? The form worked flawlessly until I tried to add the validation for the radio button and check boxes. I just need one check box at the bottom to work the other check boxes and the radio buttons can be deleted.

Logic Ali
07-01-2011, 11:50 PM
Checkboxes and radio buttons have to be tested individually, you cant read the checked property of a group. Research it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum