HTML form still submit when I return false from onsubmit?

Question

here is html form :

 <form id="form1" name="form1" action="toSQL.php" method="get" accept-charset="utf-8"   onsubmit="return submitTest();">
<p><input type="text" name="Cliname" id="textfield" maxlength = "10" /></p>
<p><textarea name="message" id="message" maxlength = "20" ></textarea>
<input type="submit" value="submit" id="btn"/>
</form>

here is js:

<script type="text/javascript" > 
function submitTest() { 
   if ( form1.textfield.value == "" ) {
       alert( "enter your name!!" ) ;
       form1.name.focus();
       return false ;
   } 

   if (form1.message.value == "" ) {
       alert( "type the content!!" ) ;
       form1.message.focus();
      return false ;
   } 
} 
</script>

alert is showed but it still send the form to sql. i have no idea :(

I *think* that `form1.textfield.value` should be `form1.Cliname.value` — Pointy, Aug 10 '14 at 17:51

score 1 · Accepted Answer · answered Aug 10 '14 at 17:56

1

The form submitted because there's error on your code. Browser can't find form child with id name on form1.name.focus();. Change it to form1.textfield.focus();.

answered Aug 10 '14 at 17:56

Iqbal Fauzi

1,561
11
12

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

In normal (non-jQuery) event handlers, return false does not stop the event from bubbling up.

Please see event.preventDefault() vs. return false for more details.

edited May 23 '17 at 12:11

Community

1
1

answered Aug 10 '14 at 17:52

olive_tree

1,417
16
23

score 0 · Answer 3 · answered Aug 10 '14 at 17:58

0

You can as well use required for HTML5

<input type="text" required name="Cliname" id="textfield" maxlength = "10" />

answered Aug 10 '14 at 17:58

Richie

1,398
1
19
36

HTML form still submit when I return false from onsubmit?

3 Answers3