onsubmit is not working in form

[ShinyEdge]

I want to validate my form so i call validateForm() using onsubmit of the form. It displays the alert but doesn't cancel the submit. What could be the problem?

function validateForm()
	{
		var x=document.forms["contactform"]["name"].value;
		if (x==null || x=="" || x=="Name")
		{
			alert("First name must be filled out");
			return false;
		}
		else
			return true;
	}

<form id="contactform" method="post" action="submitemail.php" onsubmit="return validateForm()">
			<fieldset>-
			<label for="name">Name</label>
			<input type="text" name="name" id="name" value="Name" onfocus="if(this.value=='Name')this.value='';" onblur="if(this.value=='')this.value='Name';" />
			
			<label for="email">E-mail</label>
			<input type="text" name="email" id="email" value="Email" onfocus="if(this.value=='Email')this.value='';" onblur="if(this.value=='')this.value='Email';" />
							
			<label for="subject">Subject</label>
			<input type="text" name="subject" id="subject" value="Subject" onfocus="if(this.value=='Subject')this.value='';" onblur="if(this.value=='')this.value='Subject';" />
							
			<label for="message"></label>
			<textarea name="message" id="message" cols="30" rows="10"></textarea>
							
			<div id="error"></div>
			<input type="submit" name="submit" id="submit" value="Send" />
			</fieldset>
</form>

[tinymark]

The problem is your if structure.

function validateForm()
	{
		var x=document.forms["contactform"]["name"].value;
		if (x==null || x=="" || x=="Name")
		{
			alert("First name must be filled out");
			return false;
		}
		else
			return true;
	}

Use this .

function validateForm()
	{
		var x=document.forms["contactform"]["name"].value;
		if (x==null || x=="" || x=="Name")
		{
			alert("First name must be filled out");
			return false;
		}
		else{
			return true;
	}

Do you see the curly brace i added after the else? I hope this helps.

[ShinyEdge]

Thanks for the reply. If I'm not mistaken, we can skip the curly braces if there is only one line of statement in if or else. But still, I tried after adding the braces it was same. It showed the alert but didn't cancel the submit. It went on to email the form.

[f_atencia]

Always best to use curly braces, even if you are sure you don't need that. I've had countless stress attacks because of leaving out such a fundamental character

[ShinyEdge]

Okay noted. Any idea what could be the problem?

[McLaren]

interesting. Maybe the alert statement makes something bad, try remove it. Or maybe just make that the function always return false and remove other code. If this works, add something to the code and watch when it will start not working.

[ShinyEdge]

function validateForm()
		{
			return false;
		}

Still it submits the form. No idea, why it didn't cancel. Can anyone try the code on your server and let me know?

[tinymark]

Hello ShinyEdge. A little too sleepy last night.

function validateForm(e)
	{
		var x=document.forms["contactform"]["name"].value;
		if (x==null || x=="" || x=="Name")
		{
			alert("First name must be filled out");
			return false;
			e.cancelBubble=true;
		}
		else{return true;}
	}
</script>

and this

<form id="contactform" method="post" action="submitemail.php" onsubmit="return validateForm(this)">
			<fieldset>
			<label for="name">Name</label>
			<input type="text" name="name" id="name" value="Name" onfocus="if(this.value=='Name')this.value='';" onblur="if(this.value=='')this.value='Name';" />
 
			<label for="email">E-mail</label>
			<input type="text" name="email" id="email" value="Email" onfocus="if(this.value=='Email')this.value='';" onblur="if(this.value=='')this.value='Email';" />
 
			<label for="subject">Subject</label>
			<input type="text" name="subject" id="subject" value="Subject" onfocus="if(this.value=='Subject')this.value='';" onblur="if(this.value=='')this.value='Subject';" />
 
			<label for="message"></label>
			<textarea name="message" id="message" cols="30" rows="10"></textarea>
 
			<div id="error"></div>
			<input type="submit" name="submit" id="submit" value="Send" />
			</fieldset>
</form>

[tinymark]

These are the lines to look at.

<form id="contactform" method="post" action="submitemail.php" onsubmit="return validateForm(this)">

function validateForm(e)

e.cancelBubble=true;

I added the this to the validateForm(this) to tell the script who we are dealing with.

Event bubbling is what was causing the problem. The validateForm() was doing everything it should. It faithfully prevented the default action. But events don't stop the job they do. They go from the first event (in your case the validateForm event and once validateForm is done with the event it passes it up the chain. I think the next on is onclick and then finally onsubmit.

I hope this helps.

[ShinyEdge]

Tinymark, tried the new code you suggested but no different. It still shows the alert and submits the form. =(

[McLaren]

Just made such html:

<form id="contactform" method="post" action="submitemail.php" onsubmit="return validateForm()">
			<fieldset>-
			<label for="name">Name</label>
			<input type="text" name="name" id="name" value="Name" onfocus="if(this.value=='Name')this.value='';" onblur="if(this.value=='')this.value='Name';" />
			
			<label for="email">E-mail</label>
			<input type="text" name="email" id="email" value="Email" onfocus="if(this.value=='Email')this.value='';" onblur="if(this.value=='')this.value='Email';" />
							
			<label for="subject">Subject</label>
			<input type="text" name="subject" id="subject" value="Subject" onfocus="if(this.value=='Subject')this.value='';" onblur="if(this.value=='')this.value='Subject';" />
							
			<label for="message"></label>
			<textarea name="message" id="message" cols="30" rows="10"></textarea>
							
			<div id="error"></div>
			<input type="submit" name="submit" id="submit" value="Send" />
			</fieldset>
</form>

<script>
	function validateForm()
	{
		var x=document.forms["contactform"]["name"].value;
		if (x==null || x=="" || x=="Name")
		{
			alert("First name must be filled out");
			return false;
		}
		else
			return true;
	}
</script>

and for me it works :) really don't understand how for you it does not work :) I tried it on google chrome BTW.

[tinymark]

Works on every thing here, multiple browsers on multiple operating systems. Now I'm fascinated. Put up a URL to this.

[ShinyEdge]

http://vimalan.co.cc/

The code on the site is the code you suggested with event bubbling. Doesn't work on IE, Firefox or Chrome. Is it something wrong with my host?

[McLaren]

there is something with form plugin, it does not care probably that we return false and there should be a different way to stop submision. And I think this should be in plugins documentation

[tinymark]

This is a hugely different matter. I'll look at it when I can.

[tinymark]

Where's the javascript for this form located on your site?

[ShinyEdge]

http://vimalan.co.cc/js/jquery.form.js

[tinymark]

I forgot to mention the third change I made, because I already said something about it, that's my fault. Grab this code.

In my opinion, ECMA script synatx demands the curly braces when an if statement has more than two lines. You must use curly braces once you start. I'm sure I could find a nice little quote for you.

function validateForm(e)
	{
		var x=document.forms["contactform"]["name"].value;
		if (x==null || x=="" || x=="Name")
		{
			alert("First name must be filled out");
			return false;
			e.cancelBubble=true;
		}
		else{return true;}
	}
</script>

[tinymark]

Watch out, I swapped the bubbles and return lines. As the movie says

I sure picked a bad week to give up smaoking

AFAIK returns are the last statement in the function.

function validateForm(e)
	{
		var x=document.forms["contactform"]["name"].value;
		if (x==null || x=="" || x=="Name")
		{
			alert("First name must be filled out");
			e.cancelBubble=true;
			return false;
		}
		else{return true;}
	}
</script>

[ShinyEdge]

Thanks for the info. Since you mentioned on the first reply, I'm using the curly braces on my site.

EDIT: Placing e.cancelBubble=true before the return doesn't work also. Can't believe I put return before another statement.

[tinymark]

Ok, let's roll up the sleeves. Remove the jquery files that you are not using. jQuery is grabbing control. I suspect the jquery form script. Start with it and keep going. the thing should function without jquery. Other stuff may not.

[TechySafi]

lol believe me, I tried this on my local machine and its working fine. Its validating the form and not letting me submit until I put a real value on name field.

What about putting this

<form [B]name[/B]="contactform"

By the way try in different browser!

[ShinyEdge]

Thanks for all the help guys. I really appreciate it. I just found out that the form plugin has a beforeSubmit callback to validate the form. Im new to jQuery and AJAX so it was my mistake.

The 'beforeSubmit' callback can be provided as a hook for running pre-submit logic or for validating the form data. If the 'beforeSubmit' callback returns false then the form will not be submitted.

TechySafi: yes, as pointed out by tinymark and SPeed_FANat1c, it was a problem with the form plugin.

[ShinyEdge]

How can I remove my website from the previous post?

[McLaren]

How can I remove my website from the previous post?

Don't know if its possible to do it your self, probably you can ask moderators. Or you can use htaccess to block site from all IP's.

Google "BLOCKING WITH HTACCESS"

[ShinyEdge]

okay..