HTML form action and onsubmit issues

Question

I want to run JavaScript user validation on some textbox entries.

The problem I'm having is that my form has the action of going to a new page within our site, and the onsubmit attribute never runs the JavaScript function.

Is there a better solution, or one that works with the following code: Note: the JavaScript file is written correctly and works if you switch the action to checkRegistration().

It is merely an issue with running both action and JavaScript.

<form name="registerForm" action="validate.html" onsubmit="checkRegistration()" method="post">
    <!-- Textboxes are here -->
    <!-- And the submit button -->
</form>

It works, it just checks if username textbox was email and so and so. It isn't a matter of errors in javascript. — James Brown, Apr 28 '13 at 12:22

score 76 · Accepted Answer · edited Jul 19 '20 at 22:30

76

You should stop the submit procedure by returning false on the onsubmit callback.

<script>
    function checkRegistration(){
        if(!form_valid){
            alert('Given data is not correct');
            return false;
        }
        return true;
    }
</script>

<form onsubmit="return checkRegistration()"...

Here you have a fully working example. The form will submit only when you write google into input, otherwise it will return an error:

<script>
    function checkRegistration(){
        var form_valid = (document.getElementById('some_input').value == 'google');
        if(!form_valid){
            alert('Given data is incorrect');
            return false;
        }
        return true;
    }
</script>

<form onsubmit="return checkRegistration()" method="get" action="http://google.com">
    Write google to go to google...<br/>
    <input type="text" id="some_input" value=""/>
    <input type="submit" value="google it"/>
</form>

edited Jul 19 '20 at 22:30

Peter Mortensen

30,738
21
105
131

answered Apr 28 '13 at 12:22

s3m3n

4,187
1
28
24

so in my js file I'll have if no errors -> return true, else false which won't submit and redirect to the validate html page? Correct? – James Brown Apr 28 '13 at 12:24
1

Well not exactly. If you return true form will be submitted and browser will make request. If you return false browser will stop and everything is in your hands how to handle this. The simplest way is to alert validation problem, like in example. – s3m3n Apr 28 '13 at 12:28
It is working, yet I'm getting a 304 response, instead of 200. How would this cause that? – James Brown Apr 28 '13 at 12:36
After form submit to validate.html? Do you get any response from server? – s3m3n Apr 28 '13 at 12:39
Yeah, once I hit submit with/without errors I get the GET .../register.js HTTP/ 1.1 304 0 – James Brown Apr 28 '13 at 12:41
What is `register.js`? 304 is fine for static files like js/css/images, it means that browser will use cached version instead of downloading file from beginning, because it's not modified. Read more, some [first google result](http://drron.com.au/2008/07/09/dont-panic-error-304-is-your-friend/). – s3m3n Apr 28 '13 at 12:44
It is the js file the HTML page is accessing in the onsubmit call. – James Brown Apr 28 '13 at 12:46
If you want browser to download `register.js` every time you can for example change url by giving random numbers in query parameter like `register.js?nocache=123`. Browser will treat it as new file to download. You could do it also on server side. But again 304 is completely fine. – s3m3n Apr 28 '13 at 12:50
Well then the above solution isn't working, it still redirects to the page when there are errors. – James Brown Apr 28 '13 at 12:56
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/29056/discussion-between-s3m3n-and-james-brown) – s3m3n Apr 28 '13 at 13:00
5

The important change seems to be including `return` in `onsubmit=""`. – CJ Dennis Apr 16 '16 at 03:01
I know this is an older thread, but in onsubmit = "return function()" why does there need to be a return statement? – The_Redhawk Jan 01 '22 at 19:14

score 13 · Answer 2 · answered Apr 28 '13 at 12:21

13

Try

onsubmit="return checkRegistration()"

answered Apr 28 '13 at 12:21

Arun P Johny

384,651
66
527
531

5

Why is the `return` necessary for the validation function? – Mooncrater Jun 19 '20 at 10:10
The purpose of a form validation script is to return a boolean value (true or false) to the onsubmit event handler. A value of true means that form will be submitted while a false value will block the form from being submitting. – Amol J May 06 '23 at 09:30

score 5 · Answer 3 · edited Jul 19 '20 at 22:32

5

Try:

onsubmit="checkRegistration(event.preventDefault())"

edited Jul 19 '20 at 22:32

Peter Mortensen

30,738
21
105
131

answered Mar 01 '19 at 09:23

Hiren Siddhpura

189
1
8

1

Why? Is there any reason to think that `checkRegistration` will consume the result of `event.preventDefault()`? – Nico Haase Mar 01 '19 at 09:53
1

@NicoHaase: I needed to prevent page refresh on the form submit and feeding the function `checkRegistration()` (or whatever function I used in my case) with the `event.preventDefault()` doesn't break the script and does exactly what I needed. – edison23 May 29 '19 at 14:22

HTML form action and onsubmit issues

3 Answers3

Linked

Related