Prevent users from submitting a form by hitting Enter

Advanced form management

Beyond the quick fix, enhancements can help improve the user experience and the resilience of your forms. Let's roll up our sleeves and inundate our form handling with some advanced tricks:

Perfecting Validation

A robust validation mechanism is vital before a form submission. Embedding a validationFunction inside our event handler ensures inputs are scrutinized properly:

$('form').on('keypress', 'input', function(event) {
    if (event.which == 13) {
        event.preventDefault();
        if (validationFunction(this, event)) {
            // Form is good to go; like a pizza ready for the oven!
        }
    }
});

function validationFunction(input, event) {
    // Your validation rules; like a bouncer at a swanky club! 
}


Use jQuery's .each() method to inspect form fields uniformly and offer improved accessibility by managing focus.

Spotting the right key

The keyCode method, even though deprecated, was a good way to detect keys. The modern, reliable champ is the event.key method:

$('form').on('keypress', 'input', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault();
        // Optionally, you can call the validation function
    }
});


Refining the submission method

An expert tip for handling form submissions effectively is to listen for form submission events directly:

$('form').on('submit', function(event) {
    if (event.originalEvent && event.originalEvent.explicitOriginalTarget) {
        if (event.originalEvent.explicitOriginalTarget.type === 'submit') {
            return true; // Click was on a submit button, allow submission.
        }
    }
    event.preventDefault(); // Put a leash on the form submission.
});


Fallback for non-JS scenarios

Accessibility matters! When JavaScript is disabled in the client's browser, consider placing a hidden submit button at the beginning of the form:

<form onsubmit="return false;">
    <button type="submit" disabled style="display: none;"></button>
    <!-- The rest of your form -->
</form>


Building the ideal form experience

Let's go beyond the basics, spot potential issues, and enrich the overall user experience:

Textareas are special

Textareas typically should allow the Enter key. To achieve this, we can make a sneak adjustment:

$(document).on('keydown', ':input:not(textarea)', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault();
    }
});


Medal for Consistency

Choosing $(document) over $(window) ensures a more uniform behaviour across different browsers:

$(document).on('keydown', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault(); // Enter key, you're busted!
    }
});


Inline JavaScript: The last resort

I know we love tidiness. But desperate times call for desperate measures. As a last resort, place onsubmit="return false;" directly in your <form> tag:

<form onsubmit="return false;">
    <!-- Form elements -->
</form>
