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>Validato r test</title>
<script type="text/javascript"><!--
function Loaded () {
var theField = document.getEle mentById ('field1') ;
theField.addEve ntListener ('change', validCk, false) ;
}
function validCk (e) {
if (!/([a-c])/.test (this.value) ) {
alert ('You must enter a, b, or c in this field.') ;
e.preventDefaul t () ;
e.stopPropagati on () ;
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="javascrip t:forms[0].submit()">Go</a>
<a href="javascrip t:__doPostBack( 'foo2','bar2')" >Go</a>
<a onclick="__doPo stBack('foo3',' bar3')">Go</a>
<select onchange="javas cript:__doPostB ack('foo4','bar 4')">
<option>!Go</option>
<option>Go!</option>
</select>
<a href="javascrip t:void(0)" id="anchor5">Go <script
type="text/javascript"><!--
var a5 = document.getEle mentById ('anchor5') ;
a5.addEventList ener ('click', function () {
__doPostBack ('foo5', 'bar5')
}, false) ;
--</script></a>
....???
(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>Validato r test</title>
<script type="text/javascript"><!--
function Loaded () {
var theField = document.getEle mentById ('field1') ;
theField.addEve ntListener ('change', validCk, false) ;
}
function validCk (e) {
if (!/([a-c])/.test (this.value) ) {
alert ('You must enter a, b, or c in this field.') ;
e.preventDefaul t () ;
e.stopPropagati on () ;
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="javascrip t:forms[0].submit()">Go</a>
<a href="javascrip t:__doPostBack( 'foo2','bar2')" >Go</a>
<a onclick="__doPo stBack('foo3',' bar3')">Go</a>
<select onchange="javas cript:__doPostB ack('foo4','bar 4')">
<option>!Go</option>
<option>Go!</option>
</select>
<a href="javascrip t:void(0)" id="anchor5">Go <script
type="text/javascript"><!--
var a5 = document.getEle mentById ('anchor5') ;
a5.addEventList ener ('click', function () {
__doPostBack ('foo5', 'bar5')
}, false) ;
--</script></a>
....???
Comment