DEV Community

Stephen Charles Weiss
Stephen Charles Weiss

Posted on • Originally published at stephencharlesweiss.com on

Supporting Submit On Enter

#html #a11y #react #forms

When asking users for their input, it’s often a pleasant user experience to allow them to submit the form by pressing “Enter”.

In fact, that’s the default behavior if using the <form> element:

<body> <div> <form> <div> <span id=“empty”></span> <label for=“first-name”>Your Name</label> <input name=“first-name” type=“text” /> </div> <button id=“submitBtn”> Click to see the magic! </button> </form> </div> </body> <script> function handleSubmit(e) { e.preventDefault() console.log(`clicked`) document.getElementById(“empty”).innerHTML = ‘filled!’ } document.getElementById(“submitBtn”).addEventListener(“click”, handleSubmit); </script>

With the above form, you could press enter in the first-name input or the button - in both cases, you’ll get to “filled!” Appear.

Unfortunately, breaking this default behavior is rather easy to do - particularly for the sake of design.

So, imagine instead that you have a <form> with its inputs and a button that lives outside of that form.

How do you allow the user the same ease of input?

Very similarly to how we added the event listener for click - except now we’re going to look for keyup and we’re going to be listening on the entire form.

<body> <div> <form id=“awesome-form”> <!--...No changes--> </form> </div> </body> <script> // ... no changes document.getElementById(“awesome-form”).addEventListener(“keyup”, handleSubmit); </script>

This works… too well.

There are two problems:

  1. We’re firing handleClick for any keyup. We only want it to happen on Enter.
  2. The form currently has no validation, so even if the form had errors, by pressing a key (or ‘Enter’ if the above is addressed), we’d try to submit.

For the former, we should add a condition to our handleSubmit to only fire if we press the Enter key2, for example:

 function handleClick(e) { e.preventDefault() if (e.keyCode === 13 ) { console.log(`clicked`) document.getElementById(“empty”).innerHTML = ‘filled!’ } }

Remember how I said I like React? This same thing in react would just be:

function handleClick(e) { e.preventDefault() if (e.key === ‘Enter ) { console.log(`clicked`) // do whatever you want here, but it probably won’t be getting a document by its ID. } }

And then you could pass this function as a prop to the keyUp value.

For the latter, it’s good practice to validate your form.

If validation is present, then it would be a matter of adding that as a condition to firing the function. E.g.,

 const valid = true // put in the conditions here function handleClick(e) { e.preventDefault() if (e.keyCode === 13 && valid) { console.log(`clicked`) document.getElementById(“empty”).innerHTML = ‘filled!’ } }

For form management (including validation), I like Formik. It took me a few forms worth of practice to understand how the validation works, but once I did I realized how intuitive and pleasant it is.

Now, I can just check to make sure there are no errors in my form and if everything’s good, fire off my handle submit if the user presses the enter key.

Footnotes

Top comments (0)