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>

Malefaction

can you share checkRegistration as well – Anthe

It works, it just checks if username textbox was email and so and so. It isn't a matter of errors in javascript. – Malefaction

Answer 1

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>

Trouvaille

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? – Malefaction

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. – Trouvaille

It is working, yet I'm getting a 304 response, instead of 200. How would this cause that? – Malefaction

After form submit to validate.html? Do you get any response from server? – Trouvaille

Yeah, once I hit submit with/without errors I get the GET .../register.js HTTP/ 1.1 304 0 – Malefaction

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. – Trouvaille

It is the js file the HTML page is accessing in the onsubmit call. – Malefaction

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. – Trouvaille

Well then the above solution isn't working, it still redirects to the page when there are errors. – Malefaction

let us continue this discussion in chat – Trouvaille

The important change seems to be including return in onsubmit="". – Kaminski

I know this is an older thread, but in onsubmit = "return function()" why does there need to be a return statement? – Dip

Answer 2

Try

onsubmit="return checkRegistration()"

Anthe

Why is the return necessary for the validation function? – Zoogeography

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. – Westsouthwest

Answer 3

Try:

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

Romonaromonda

Why? Is there any reason to think that checkRegistration will consume the result of event.preventDefault()? – Moor

@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. – Obannon