I'm trying to use Greasemonkey to add form validation to some Web pages
(whose construction is otherwise out of my control). To boil it down to
a simple test case, the combination of the original HTML and my script
results in something like...
<html>
<head>
<title>Validator test</title>
<script type="text/javascript"><!--
function Loaded () {
var theField = document.getElementById ('field1') ;
theField.addEventListener ('change', validCk, false) ;
}
function validCk (e) {
if (!/([a-c])/.test (this.value) ) {
alert ('You must enter a, b, or c in this field.') ;
e.preventDefault () ;
e.stopPropagation () ;
this.focus () ;
return false ;
}
}
// --></script>
</head>
<body onload="Loaded();">
<form action="http://www.example.com/submitted/">
<input id="field1" maxlength="1" size="1" type="text" />
<input id="submit1" type="submit" value="Go" />
</form>
</body>
</html>
Steps to reproduce the problem:
- Cut and paste the above HTML into a file, and load it into Firefox.
- Enter "Q" in the text field.
- Without hitting the Tab key or otherwise exiting the text field, click
the "Go" button.
Expected result:
- The warning box pops up, and when the user dismisses it, the cursor is
back in the text field.
Observed result:
- The warning box pops up, but before the user dismisses it, the form is
submitted anyway.
Now, I understand that preventDefault() and stopPropagation() are
affecting field1 and not submit1, but why not? Shouldn't canceling an
event cancel ALL the effects of that event? More to the point, how can
I ensure that the "submit" effects ARE canceled, and how can I do it
when the actual page could have several dozen submit buttons, in guises
such as...
<a href="javascript:forms[0].submit()">Go</a>
<a href="javascript:__doPostBack('foo2','bar2')">Go</a>
<a onclick="__doPostBack('foo3','bar3')">Go</a>
<select onchange="javascript:__doPostBack('foo4','bar4')">
<option>!Go</option>
<option>Go!</option>
</select>
<a href="javascript:void(0)" id="anchor5">Go<script
type="text/javascript"><!--
var a5 = document.getElementById ('anchor5') ;
a5.addEventListener ('click', function () {
__doPostBack ('foo5', 'bar5')
}, false) ;
--</script></a>
....???
