Abort form submit action after validation

not trivial

[moltar]

I am writing an email validation script for newsletter form. I am attaching an event to the form to watch for "submit" action. I am NOT using inline JS to call an action (e.g.

<form onsubmit="blah()">

)

I cannot use "return false" from the event handler function. I need some sort of other way to cancel the form submit if the input was invalid.

Simplified HTML

<form action="mail.cgi" method="get" id="newsletter_form"> 
<input type="text" name="email" id="email" /> 
<button type="submit">Sign Up</button> 
</form>

JS - some functions are from lib.js by Caio Chassot

addLoadEvent(newsletterSubmit); 
function newsletterSubmit() { 
return addEvent(getElem('newsletter_form'), 'submit', newsletterValidateEmail); 
} 
function newsletterValidateEmail() { 
emailAddress = getElem('email'); 
if (!isEmail(emailAddress.value)) { 
alert('The email address you entered is invalid.'); 
//INVALID EMAIL 
} 
} 
function isEmail(string) { 
if (string.search(/^\w+((-\w+)¦(\.\w+))*\@[A-Za-z0-9]+((\.¦-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)!= -1) 
return true; 
else 
return false; 
}

What I basically need is some sort of JS statement to abort the form submission at the point where it says "INVALID EMAIL" in bold. Something like:

getElem('newsletter_form').abort()

[Bernard Marx]

Hi Moltar,

The library functions are somehow interfering with your use of return false.
I guess this would work (to cover standards browsers & IE, but not NS4 )

function newsletterValidateEmail(e) { 
    .....
    window.event? event.returnValue = false : e.preventDefault(); /* IE : standards */
}

BUT (in the standards case) you will have to make sure that the event object (e) is being passed down the chain of functions into this function. If the library is any good, it should be doing that anyway.

[moltar]

Thats one of the other problems. I don't think I can pass anything into a function when I setup the event. At least I didn't find a way.

I have to pass a function name to another function. E.g.:

addLoadEvent(newsletterSubmit);

If I do

addLoadEvent(newsletterSubmit(param));

then it doesn't work.

[Bernard Marx]

I don't think you have to. I imagine addEvent is of the usual kind that wraps up addEventListener with IE's attachEvent. The event object should be being passed through to
your function in the natural course.

To test (not in IE, since it's not necessary anyway) put in a parameter, and this at the top line of the function:

function newsletterValidateEmail([blue]e[/blue]) {
  ([blue]alert(e && e.constructor==Event);[/blue]

Then again, if there is an event object getting through, the fix should be working anyway.

[moltar]

Thanks Bernard! You were right from the start. The event was being passed onto the function and your first suggestion worked like a charm! Thanks a lot!