Why is my HTML form still submitting when I return false from onsubmit?

Question

I wrote a simple script to validate the login form as follows:

<script type="text/javascript"> function validateLoginForm(){ var idV = document.forms["LoginForm"]["id"].value; var pwdV = document.forms["LoginForm"]["pwd"].value; if (idV == null || idV == "" || idV.length < 5) { alert("user ID must be filled and of more than 4 characters!!"); id.focus(); return false; } if (pwdV == null || pwdV == "" || pwdV.length < 5) { alert("Password must be filled and of more than 4 characters!!"); pwd.focus(); return false; } return true; } </script> 

and name it like:

 <form name="LoginForm" method="POST" onsubmit="return validateLoginForm()" action="Login" > . . . . </form> 

The problem is that javaScript throws a warning because I configured it correctly, but at the end the Login servlet was also called automatically, which is wrong. Why is this happening? Any solution?

Answer 1

Redirecting to Login is due to js error.

You do not define the variable id and psw .

Therefore, when you try to execute id.focus() or psw.focus() - you have a js error and returns true by default

So add this code:

 var id = document.forms["LoginForm"]["id"]; var pwd = document.forms["LoginForm"]["pwd"]; var idV = document.forms["LoginForm"]["id"].value; var pwdV = document.forms["LoginForm"]["pwd"].value; 

Answer 2

Try it,

 <script type="text/javascript"> function validateLoginForm(){ var idV = document.forms["LoginForm"]["id"].value; var pwdV = document.forms["LoginForm"]["pwd"].value; var err = ''; if (idV == null || idV == "" || idV.length < 5) { err = "user ID must be filled and of more than 4 characters!! \n"; document.getElementById("id").focus() } if (pwdV == null || pwdV == "" || pwdV.length < 5) { err = "Password must be filled and of more than 4 characters!! \n"; document.getElementById("pwd").focus() } if(err == '') return true; else { alert(err); return false; } } </script> 

Answer 3

Without you inserting the entire contents of your form, I cannot be sure, but I am going to make a good guess here. Am I going to say that your tags for the fields of your user ID and password ONLY have name attributes on them?

When you work with forms in HTML, you must use 'name =' so that the parameter names are passed to the receiving script. This is what your script gives the id = blah & pwd = blah bit in the url or as a postal payload.

However....

When you access the values ​​using the DOM (document object model) as you are in the script, then you need to identify the element with the id = attribute.

The same is true for any element anywhere in your document that you need to access using a script in js.

If you notice also, you will get a warning, but just like not returning false, your focus call will never be called either, this will cause the script call to be canceled as an element with the name 'id' cannot.

add id = "id" and id = "pwd" next to your name = "id" and name = "pwd" attributes in your input tags, and you should find that everything will work properly. EG:

  <input type="text" name="id" id="id" ... /> 

In the last note, I would recommend that you rewrite this function using something like jQuery, you will find the model more intuitive and cross-platform.

Answer 4

Ive created a minimal test case: http://www.pauldwaite.co.uk/test-pages/7723381/

 <script> function pretendValidation(){ alert("Validatation failed!"); return false; } </script> <form action="http://www.google.co.uk/" method="POST" onsubmit="return pretendValidation();"> <input type="submit" value="Submit"> </form> 

When I click Submit, a warning appears and the form does not submit. Therefore, theoretically your code should work.

As @Shawty mentioned , there might be a problem with your HTML form. If you also post all the HTML, we can verify this.

Answer 5

Best practice: if you want to ensure that you are not submitting the form, even if your Javascript throws an en exception, you should wrap your code in try / catch blocks:

 <script type="text/javascript"> function validateLoginForm(){ try{ var idV = document.forms["LoginForm"]["id"].value; var pwdV = document.forms["LoginForm"]["pwd"].value; if (idV == null || idV == "" || idV.length < 5) { alert("user ID must be filled and of more than 4 characters!!"); id.focus(); return false; } if (pwdV == null || pwdV == "" || pwdV.length < 5) { alert("Password must be filled and of more than 4 characters!!"); pwd.focus(); return false; } }catch(e){ console.log(e); return false; } return true; } </script> 

Answer 6

Well, oddly enough, my form was still submitted even when I returned false from my function and returned this function to onsubmit form ... I even tried:

 onsubmit="return false;" 

Not sure what was happening ... either way, moving the event trigger to the submit onclick button fixes the problem.

Update : the finished search that the code I edited had another JS handler attached to the onsubmit event, so it ignored my return false;