Cuando el formulario está vacío, al presionar el botón Iniciar sesión se abre la página. Quiero que cometa un error. Ya estoy recibiendo un error si no es compatible con el servidor. Como puedó resolver esté problema ?
const login = (e) => { e.preventDefault(); axiox.post("http://localhost:2000/api/auth/login", { email, password }).then((response) => { console.log("response", response) localStorage.setItem("login", JSON.stringify({ userLogin: true, token: response.data.access_token, })); setError(""); setEmail(""); setPassword(""); history.push("schools"); }) .catch((error) => setError(error.response.data.message)); };use esto para validar el formulario
const login = (e) => { e.preventDefault(); if(!email || !password){ //send error message to user }else{ // make request to api } };Una forma simple y eficiente es verificar cualquier error en el lado del cliente, es decir, si el formulario está vacío, no debe realizar una llamada a la API. La validación en el formulario o en tu función para comprobar si los valores son null es suficiente.
Puede agregar más validaciones en el formulario, sin embargo, ciertas validaciones que son mandato comercial podrían realizarse en el lado del servidor.
const login = (e) => { e.preventDefault(); // make request to api if(!email && !password) { //here make the API call to authenticate a user } };Consulte este enlace para obtener más detalles, cómo agregar la validación en React Forms.
Creo que desea que el formulario responda con un mensaje de error cuando no hayan completado el formulario. Aquí:
const login = (e) => { e.preventDefault(); if(!email || !password){ //Send the error message, like alert('Either the Email or Password is empty!') }else{ //The code to execute when both Email and Password are filled. } };