How to prevent form from being submitted?

javascript

event-handling

form-submission

javascript-best-practices

byAnton Shumikhin·Jan 18, 2025

Halt form submissions by leveraging event.preventDefault() within the submit event listener assigned to your form. This magical method intercepts and blocks the default submission action.

Here's a bite-sized code piece to go:

document.querySelector('form').addEventListener('submit', function(event){
  // Y'all shall not pass!
  event.preventDefault(); 
});

Just clip this on to your form's submit event, and marvel as it instantly halts the default submit action.

Start with strong foundations: form care 101

When stopping form submissions, it's crucial to create a system that's staunchly steady and resilient. This goes beyond just stopping the form. You'd want a rock-solid system that behaves the same across multiple browsers and graces over unexpected JavaScript errors without breaking in a cold sweat.

Boromir's not wrong: One does not simply write modern JavaScript

That's right! JavaScript has morphed over the ages, bringing some nifty tricks for us to manage events like a pro:

All ears get way more done! Use addEventListener. It simplifies attaching multiple listeners to one event, ensuring expansion beyond imagination!

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
    // Gandalf slams down his staff, and...
    event.preventDefault();
    // Further logic leisurely follows
});

Let's try...catch even the sneakiest of errors that are up to no good. You know, errors which may inadvertently lead to form submission sneakily.

form.addEventListener('submit', (event) => {
    try {
        // The Dark Lord shall not pass!
        event.preventDefault();
        // Some JavaScript wizardry ensues here
    } catch (error) {
        console.error("We've got a breach! Error during form submission: ", error);
    }
});

Do no harm: The Hippocratic Oath of event handling

When you're working with say, custom controls, or if you're unable to modify the submit button directly:

Let's keep things tidy by avoiding inline onsubmit attributes. Instead, keep your JavaScript code linked to your HTML, all pristine and clean.
```

<form onsubmit="return false;">
```

Now, if you're on first-name basis with jQuery or similar libraries, don't be shy. Use them. They offer easy-to-read, cross-browser-compatible ways to babysit event handling.

// Hold up, jQuery's in the house!
$('form').on('submit', function(event) {
    // Abracadabra!
    event.preventDefault();
    // More spell casting here...
});

Cross the Ts and Dot the Is

Test drive your code not just on Chrome but also on Firefox, Edge, and tribal browsers if you can. Cross-browser compatibility is what separates men from the boys.
When in doubt, always choose unobtrusive JavaScript techniques. Remember, JavaScript might be turned off sometimes.
Last but not least, always put all your form handling logic in a separate function. This way, you make any future changes a walk in the park.

More power to you: Advanced form interception techniques

Ready to take things up a notch? Tackle more complex situations where stopping a form submission requires you to do more than just wave a magic wand:

Is your submit button a trigger-happy cowboy?

If yes, you've got to reign it in! Sometimes, a form can be sent multiple times if the user gets over-excited and clicks the submit button repeatedly:

Here's how to avoid multiple form submissions:

form.addEventListener('submit', function(event) {
    // No need to rush, buddy!
    event.preventDefault();
    // Submit? Only if you say the secret passphrase...
    this.querySelector('[type="submit"]').disabled = true;
    // The real magic begins here...
});

Dealing with over-eager parents?

Is your form part of larger interactive components?

Squash that bubbly enthusiasm with event.stopPropagation() to prevent the submit event from roping in parent elements.

form.addEventListener('submit', (event) => {
    // Aw, shucks! I forgot to tell my parents.
    event.preventDefault();
    // No worries, I'll stop my folks from hearing about this!
    event.stopPropagation();
    // The secret ritual continues...
});

Conditional love: form submission

If your form should submit only if conditions are met and certain stars are aligned:

Make sure you do a quick check before preventing the default action.

form.addEventListener('submit', (event) => {
    if (!isFormValid()) {
        // Better safe than sorry!
        event.preventDefault();
        // Show them what they messed up
    } else {
        // Showtime, baby!
    }
});

Jedi-level form management

If you'd like to truly geek out and cover every last base, it's critical to ensure you've established some solid fail-safes to prevent any rogue circumstances that may lead to unexpected form submission:

Watch out for silent but deadly errors!

A robust system isn't spooked by errors:

Be like a ninja, striking before the enemy knows! Catch silent errors, which can sometimes sneak past return false.
Like Sherlock Holmes, prepare a paper trail. Employ some logging and monitoring tools to snuff out and fix these little buggers.

Keep it clean

Always adopt coding methodologies that make your code easier to maintain. Remember, clean code is happy code.
Adhere to the DRY principle (Don't Repeat Yourself). Repetitive code is just begging for problems down the line.