Ya hay un montón de respuestas útiles para evitar el envío de formularios al ingresar ( ejemplo1 , ejemplo2 ). Sin embargo, ninguno de estos funciona si quiero incluir la etiqueta "requerido" en cualquiera de las entradas. Vea el código a continuación:

 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); // do other stuff }; return ( <form id="LocationForm" onSubmit={handleSubmit} > <input type="text" placeholder="Please add country" onKeyUp={handleCountryChange} /> <input type="text" placeholder="Please add city" onKeyUp={handleCityChange} required /> <input type="submit" value="Submit" /> </form> )

Cuando presiono enter en la primera entrada, aparece un cuadro de diálogo que dice "Este campo es obligatorio". Idealmente, solo quiero que esto aparezca cuando hago clic en el botón Enviar y no cuando presiono Intro en cualquier otra entrada. Por supuesto, podría implementar esta lógica yo mismo sin usar las etiquetas requeridas, pero preferiría evitar reinventar la rueda aquí... a menos que haya alguna otra práctica estándar que la gente use. ¿Algún consejo?