How To Prevent Form Submission On Enter Press In React

This article will show you how to prevent form submission on Enter press in React using the onSubmit() method or the onKeyPress() method. Let’s read this article now.

Prevent form submission on Enter press in React

When sending data to the server, we often have to check whether the data format the user enters is appropriate. This helps reduce the load on the server side in some cases.

For example, suppose you create a login form. In that case, if you do not use Javascript to ask users to enter enough username and password information, it is easy for them to submit continuously. This creates pressure on the server. Of course, the server side has to go through one more data validation step before updating the database.

Code:

import { useState } from "react";
 
export default function App() {
  const [inputValue, setInputValue] = useState("");
  return (
    <div>
      <h2>Prevent form submission on Enter press in React | LearnShareIT</h2>
      <br />
      <form >
        <h2>Form</h2>
        <label>
          Age:
          <input
            type="text"
            value={inputValue}
            onChange={(e) => {
              setInputValue(e.target.value);
            }}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

Like this code, when you press Enter, the program still recognizes it as a submit action by default of the form. But when you want to submit a form on the user side, depending on the website will receive different events to submit the form. For example, if a website does not want the form to be submitted when the user presses Enter, then see the methods below.

Use onSubmit method

However, you can prevent this by using the onSubmit event with the form tag to control this action.

Code:

 const handleSubmit = (e) => {
    e.target.preventDefault();
  };
  <form onSubmit={handleSubmit}>

And in the handleSubmit function, when we have used the preventDefault() method, it also means that the program has prevented the form submits action and we can customize the form submit action.

Use onKeyPress() method

The onKeyPress event is combined with two actions: after pressing a key on the keyboard, the event is fired when you release the key.

So we can add this event to the input tag to be able to handle the event the user presses the “Enter” button.

Code:

<input
       type="text"
       value={inputValue}
       onChange={(e) => {
          setInputValue(e.target.value);
       }}
       onKeyPress={(e) => {
           if (e.key === "Enter") {
             console.log(
             "We have prevented form submission on Enter press."
             );
          }
       }}
/>

Using this event, we can check what keycode is pressed down, and we will compare it with the keycode of the “Enter” button and prevent the form submit action here. Good luck with the above methods.

Summary

To summarize, the article introduced you to two good ways to prevent form submission on Enter press in React. However, we recommend using the onSubmit method with e.preventDefault(). Let’s try it.

Maybe you are interested:

• How to submit a form using the Enter key in React.js?
• Get Input value when Enter key is pressed in React
• Submit a form using the Enter key in React.js

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs