Submit form without submitting form

Question

Confusing title, I know. I'll try to word this as best as I can.

What I have

A large form made up of multiple sections. Only one section is visible at one time, and clicking the Continue button just displays the next part of the form using javascript. Some inputs contain the type='email' attribute.

enter image description here

What I want to happen

When the user clicks a Continue button, I want the browser to think the form is being submitted so it does its checks on the type='email' inputs and displays a message if the input is not valid, just like this. enter image description here

But I do not want it to submit the form when the Continue button is clicked.

EDIT: Sorry, I forgot to add that I also need the form to submit at the end. So I cannot use the onsubmit='return false' approach.

What currently happens

At the moment, the browser validation activates when I click the final Submit button (because the form is actually being submitted). But this is too late because the form sections are all closed now, and users will not be able to see which input needs attention.

This might help http://stackoverflow.com/questions/7548612/triggering-html5-form-validation — flec, Jun 11 '14 at 16:27
If you are going to use `javascript` on your page, you might as well use `jquery` in conjunction with the `jquery validation plugin`. It will take more work than simply using html attributes to enforce validation but it will take much less work than writing the `javascript` to validate the page yourself. Plus, it gives you a lot more control of when validation occurs and what happens when validation occurs. — elitechief21, Jun 11 '14 at 16:34
why don't you just have your continue button check validity of inputs and then progress to next page. — theonlygusti, Jun 11 '14 at 16:34
do you want to perform client side validation or server side validation? if server side then submit your form as a target to an iframe — ɹɐqʞɐ zoɹǝɟ, Jun 11 '14 at 16:38
also related: http://stackoverflow.com/questions/7002230/trigger-standard-html5-validation-form-without-using-submit-button — fsw, Jun 11 '14 at 16:39
@elitechief21 I'm using javascript for validation anyway, but I still want to keep the html5 attribute for the sake of semantic code and also so the keyboard layout changes on some devices. — Dan Johnson, Jun 12 '14 at 07:40

score 2 · Accepted Answer · answered Jun 11 '14 at 16:33

2

You need add form and submit button attributes:

<form onSubmit="return false;">
    <input type="email" /> <!-- this will validate! -->
    <button type="submit" onClick="showNextForm();">Continue</button>
</form>

No code was shown by you, so I can't optimize yours appropriately, but this is essentially what you need to do to your <form> and <button>.

The form will validate, but will not submit!

answered Jun 11 '14 at 16:33

StaticVoid

1,539
10
11

1

you forgot the equals `
`
– theonlygusti Jun 11 '14 at 16:35
Why the downvote? This works since the OP is using HTML5 element type=email. – StaticVoid Jun 11 '14 at 16:41
2

I hate it when people downvote but give no explanation, stackoverflow is a place to improve your contributions, which you cannot do if idiots go around downvoting answers without first giving constructive criticism. – theonlygusti Jun 11 '14 at 16:46
@StaticVoid Unfortunately this will not work as I still need to submit the form at the end. – Dan Johnson Jun 12 '14 at 07:42
When you get to the end, you can .serialize the form and post it using jquery. – StaticVoid Jun 12 '14 at 13:45
Why not use ``? – FluorescentGreen5 Jun 16 '17 at 02:11

score 0 · Answer 2 · answered Jun 11 '14 at 16:56

Here is an approach you can use.

$(function(){
    $('#continue').click(function(e){
        if(!$('#email')[0].checkValidity()){
            $('#form').find(':submit').click();
        }
        else {
            //Open next section
            alert('Opening next section');
        }
    });
});

Working jsfiddle http://jsfiddle.net/mrodriguezr/5bzNx/3/

score -2 · Answer 3 · answered Jun 11 '14 at 16:35

-2

Try

<form onsubmit="return yourJSCheckFunction();">

answered Jun 11 '14 at 16:35

user2810895

1,284
3
19
33

2

Would you like to add a explanation to your code? Code answers are alright but explanations are gold – secretformula Jun 11 '14 at 16:53
This would not work in my situation as I still need to submit the form at the end. – Dan Johnson Jun 12 '14 at 07:41
You can submit with the XMLHttpRequest object in javascript [link](http://www.w3schools.com/xml/xml_http.asp) – user2810895 Aug 27 '14 at 19:48

Submit form without submitting form

3 Answers3