|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
May 1st, 2008, 02:30 PM
|
||||
|
||||
|
OnSubmit function problem
Tried looking through older threads but couldn't find a solution to the problem I'm having.
Am trying to validate form values on submit using the following code. Upon submit the validation function seems to be returning true before any of the checks are even done. I have commented all of the field checks out and put 'return false;' and it still submits the form. Can anyone help me figure out what's going on here? Code:
<script language="JavaScript">
<!--
function contactValid() {
var electricmail=document.contactform.electricmail.value;
var contactname=document.contactform.contactname.value;
var contactphone=document.contactform.contactphone.value;
var contactinput=document.contactform.contactinput.value;
errorArray = new Array();
errorArray.push('The following error(s) were discovered:\n');
if (contactname == "your name" && contactname == "")
errorArray.push("Your name was not entered.\n");
else if (electricmail == "e-mail address" && electricmail == "")
errorArray.push("E-mail address not entered.\n")
else if (contactphone == "telephone number" && contactphone == "")
errorArray.push("Telephone number not entered.\n")
else if (contactcomments == "enter your question" && contactcomments == "")
errorArray.push("No question/comment was entered.\n")
else if (!(electricmail.indexOf(' ')==-1
&& 0<electricmail.indexOf('@')
&& electricmail.indexOf('@')+1 < electricmail.length
))
errorArray.push("E-mail address is invalid.\n");
else if (errorArray.length > 1)
alert (errorArray);
return false;
else return true;
}
//-->
</script>
<div id="quickContact">
<label for="contactform"><?php _e('Quick Contact: '); ?></label>
<form id="contactform" name="contactform" method="post" action="<?php bloginfo('template_directory'); ?>/forms/" onSubmit="return contactValid()">
<dl>
<dd><input type="text" name="contactname" class="contactinput" id="contactname" onfocus="if(this.value=='your name')this.value=''" value="your name" alt="Your name" tabindex="1" /></dd>
<dd><input type="text" name="electricmail" class="contactinput" id="electricmail" onfocus="if(this.value=='e-mail address')this.value=''" value="e-mail address" alt="E-mail address" tabindex="2" /></dd>
<dd><input type="text" name="contactphone" class="contactinput" id="contactphone" onfocus="if(this.value=='telephone number')this.value=''" value="telephone number" alt="Telephone number" tabindex="3" /></dd>
<dd class="tobmaps"><input name="emailaddress" type="text" id="emailaddress" /></dd>
<dd><input type="text" class="contactinput" name="contactcomments" id="contactcomments" onfocus="if(this.value=='enter your question')this.value=''" value="enter your question" alt="Enter your question." tabindex="4" /></dd>
<dd><input type="image" src="<?php bloginfo('template_directory'); ?>/images/submit.jpg" name="contactsubmit" value="Submit" id="contactsubmit" alt="Send Form" /></dd>
</dl>
</form>
<div class="clearing"></div>
</div>
Changing the javascript to this actually pops up an alert without submitting the form: Code:
<script language="JavaScript">
<!--
function contactValid() {
alert("function reached!");
return false;
}
//-->
</script>
This variation yields no alert and the form submits, sending the message. Code:
<script language="JavaScript">
<!--
function contactValid() {
var electricmail=document.contactform.electricmail.value;
var contactname=document.contactform.contactname.value;
var contactphone=document.contactform.contactphone.value;
var contactinput=document.contactform.contactinput.value;
errorArray = new Array();
errorArray.push('The following error(s) were discovered:\n');
alert('Variables reached: '.electricmail.','.contactname.','.contactphone.','.contactinput);
return false;
}
//-->
</script>
__________________
|
|
#2
May 1st, 2008, 02:35 PM
|
||||
|
||||
|
Ok, that was a lot of code...
I think the simpliest fix is to put your submit in your function (that is what i do) So on your submit button, you call your procedure, your procedure validates all your values, and if they are right, the calls form.submit()! easy peasy.
__________________
The liver is evil and must be punished!
|
|
#3
May 1st, 2008, 02:51 PM
|
||||
|
||||
|
Quote:
Thanks for your reply. If nobody can tell me why this isn't working I may end up doing it your way. If I didn't have another form validating with a function the same way as this I wouldn't mind switching strategies so much, but as it is I'd like to know what happened here to cause a problem.
|
|
#4
May 1st, 2008, 03:51 PM
|
||||
|
||||
|
diseased013, it sounds like you have an error in that function.
Have you looked in Firefox's Error Console?
__________________
Spreading knowledge, one newbie at a time. Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions IE7: the generation 7 browser new in a world of generation 8 browsers. Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.
|
|
#5
May 2nd, 2008, 10:43 AM
|
||||
|
||||
|
Firefox Error Console reports a syntax error for
Code:
else return true; at the end there.
|
|
#6
May 2nd, 2008, 10:47 AM
|
||||
|
||||
|
Change
Code:
else if (errorArray.length > 1) alert (errorArray); return false; else return true; to Code:
if (errorArray.length > 1) {
alert (errorArray);
return false;
} else {
return true;
}
|
|
#7
May 2nd, 2008, 12:52 PM
|
||||
|
||||
|
That still submits the form. So apparently it's still returning true, though it shouldn't be. Hrm
|
|
#9
May 5th, 2008, 02:14 PM
|
||||
|
||||
|
Sorry for slow response. No errors are being reported now.
edit: And the form is still submitting though it should be returning false. Last edited by diseased013 : May 5th, 2008 at 02:23 PM.
|
|
#10
May 6th, 2008, 05:39 AM
|
||||
|
||||
|
First of all, this isn't PHP.
Code:
alert('Variables reached: '.electricmail.','.contactname.','.contactphone.','.contactinput);
Spot the problem? Here's a hint: It's not not the concatenation operator, or lack thereof in JavaScript (the plus sign has the duel responsibilities of adding numbers and concatenating strings, so it's not strictly a concatenation operator). Secondly, when posting code in the JavaScript forum, PLEASE post the GENERATED OUTPUT, and NOT the PHP code used to generate it. I have no way of knowing what bloginfo('template_directory'); is barfing up, and it really vexes me to read a block of JavaScript and HTML, only to slam into the dreaded "<?php" escape three quarters of the way through. That opener means all the effort I put into mentally parsing your script has been for naught, as half the code (perhaps the pertinent half) is vapor which I imagine is calling the screw_with_Joe_by_FUBARing_all_other_script_logic() method behind the scenes. Okay, now to pick apart that method of yours... Code:
if (contactname == "your name" && contactname == "") You're asking if the contact name field contains the string "your name" and is at the same time empty. You don't have to be George Boole to see that this can never be the case. As this same faulty logic is repeated throughout the function, we see that no errors will ever be pushed onto the error stack and, hence, the form is always submitted. Fix the conditionals (by replacing all those AND "&&" tests with OR "||") and your problem will go away. Actually, I'm half lying. I said the same faulty logic was repeated throughout the function. The code below may not have the exact same problem, but its logic is faulty, so your function fails anyhow. Code:
else if (!(electricmail.indexOf(' ')==-1
&& 0<electricmail.indexOf('@')
&& electricmail.indexOf('@')+1 < electricmail.length
))
errorArray.push("E-mail address is invalid.\n");
This next snippet will return true if the mail address doesn't contain an at sign or the first at sign is in the first character position or the last character position: Code:
!(0<electricmail.indexOf('@')
&& electricmail.indexOf('@')+1 < electricmail.length
)
No problems with that logic, and it's almost what you're asking. But not quite. Add the rest of the predicate... Code:
else if (!(electricmail.indexOf(' ')==-1 // BAD!
&& 0<electricmail.indexOf('@')
&& electricmail.indexOf('@')+1 < electricmail.length
))
errorArray.push("E-mail address is invalid.\n");
...And suddenly you're saying "this email address is invalid if it doesn't contain an at sign or the first at sign is in the first character position or the last character position... But if the email address contains a space character consider it valid no matter what." The fix for this is to change that first && to ||, which makes the validity test amount to the following: "This email address is invalid if it doesn't contain an at sign or the first at sign is in the first character position or the last character position... The email address is also to be considered invalid if it contains a space character." Follow all that? Last edited by Joseph Taylor : May 6th, 2008 at 05:44 AM.
|
|
#11
May 6th, 2008, 11:54 AM
|
||||
|
||||
|
Well said, Joseph.
 Well that explains it... I wasn't looking for logic errors. I wrongly assumed (without realizing it) that the logic was fine. I've got to remember that newbies sometimes have trouble with logic too.
|
|
| Viewing: Dev Shed Forums > Web Design > JavaScript Development > OnSubmit function problem |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
