Skip to main content
Título modificado con descripción del problema, correcciones en redacción, ruido removido
Origen Enlace
padaleiana
  • 3.3k
  • 13
  • 19
  • 27

Problema con formulario A la hora de reactllenar el form y enviar los datos, el servidor responde que falta llenar los campos

Hola que tal como andan? tengo un problema de emergencia, resulta que estoyEstoy haciendo un formulario de registro y login con react, peroy resulta que a la hora de llenar el form y enviar los datos, el servidor me responde con que falta llenar los campos,yo. Yo puse que en el servidor de express que en caso de que se envienenvíen campos vaciosvacíos se responda asiasí, pero lleno los campos en el formulario y de igual manera me enviaenvía este error, he buscado en todos lados pero no enecuentro una solucion, aqui mando imagenes del codigo y del problema, gracias por la atencion.


 import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import axios from 'axios';

export default function Register(){

    const [datos, setDatos] = useState({
        nombre: '',
        contraseña: ''
    });

    const [mensaje, setMensaje] = useState();
    const [loading, setLoading] = useState(false);
 
    const { nombre, contraseña } = datos;

    const HandleChange = (e) => {
        setDatos({ ...datos, [e.target.name]: e.target.value })
    }

    const onSubmit = async (e) => {
        e.preventDefault()
        if(nombre !== '' && contraseña !== '') {
            const Usuario = {
                nombre, 
                contraseña
            };
            //setLoading(true)
            await axios
            .post('http://localhost:4000/register', Usuario)
            .then(({data}) => console.log(data))
        }
    }

    const navigate = useNavigate();

    return(
        <div > 
            <h2>Bienvenido a Multiventas</h2>
            <h3>Registrese para continuar</h3>
            <form onSubmit={(e) => onSubmit(e)}>
                <div>
                    <label htmlFor="nombre">Nombre</label>
                    <input 
                    onChange={(e) => HandleChange(e)}
                    type="text" 
                    id='nombre' 
                    name='nombre' 
                    placeholder='Ejm: Juan' 
                    autoComplete="off"
                    />
                </div>

                <div>
                    <label htmlFor="contraseña">Contraseña</label>
                    <input 
                    onChange={(e) => HandleChange(e)}
                    type="password" 
                    id='contraseña' 
                    name='contraseña'  
                    autoComplete="off"
                    />
                </div>

                <button type="submit"> Registrarme </button>
                <p>
                    ¿Ya tienes cuenta?
                    <b onClick={() => navigate('/login')} style={{cursor: 'pointer'}} >Iniciar Sesion</b>
                </p>

            </form>
        </div>
    )
};
 

Problema con formulario de react

Hola que tal como andan? tengo un problema de emergencia, resulta que estoy haciendo un formulario de registro y login con react, pero resulta que a la hora de llenar el form y enviar los datos, el servidor me responde con que falta llenar los campos,yo puse que en el servidor de express que en caso de que se envien campos vacios se responda asi pero lleno los campos en el formulario y de igual manera me envia este error, he buscado en todos lados pero no enecuentro una solucion, aqui mando imagenes del codigo y del problema, gracias por la atencion.


 import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import axios from 'axios';

export default function Register(){

   const [datos, setDatos] = useState({
       nombre: '',
       contraseña: ''
   });

   const [mensaje, setMensaje] = useState();
   const [loading, setLoading] = useState(false);

   const { nombre, contraseña } = datos;

   const HandleChange = (e) => {
       setDatos({ ...datos, [e.target.name]: e.target.value })
   }

   const onSubmit = async (e) => {
       e.preventDefault()
       if(nombre !== '' && contraseña !== '') {
           const Usuario = {
               nombre, 
               contraseña
           };
           //setLoading(true)
           await axios
           .post('http://localhost:4000/register', Usuario)
           .then(({data}) => console.log(data))
       }
   }

   const navigate = useNavigate();

   return(
       <div > 
           <h2>Bienvenido a Multiventas</h2>
           <h3>Registrese para continuar</h3>
           <form onSubmit={(e) => onSubmit(e)}>
               <div>
                   <label htmlFor="nombre">Nombre</label>
                   <input 
                   onChange={(e) => HandleChange(e)}
                   type="text" 
                   id='nombre' 
                   name='nombre' 
                   placeholder='Ejm: Juan' 
                   autoComplete="off"
                   />
               </div>

               <div>
                   <label htmlFor="contraseña">Contraseña</label>
                   <input 
                   onChange={(e) => HandleChange(e)}
                   type="password" 
                   id='contraseña' 
                   name='contraseña'  
                   autoComplete="off"
                   />
               </div>

               <button type="submit"> Registrarme </button>
               <p>
                   ¿Ya tienes cuenta?
                   <b onClick={() => navigate('/login')} style={{cursor: 'pointer'}} >Iniciar Sesion</b>
               </p>

           </form>
       </div>
   )
};
 

A la hora de llenar el form y enviar los datos, el servidor responde que falta llenar los campos

Estoy haciendo un formulario de registro y login con react, y resulta que a la hora de llenar el form y enviar los datos, el servidor me responde con que falta llenar los campos. Yo puse en el servidor de express que en caso de que se envíen campos vacíos se responda así, pero lleno los campos en el formulario y de igual manera me envía este error.

import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import axios from 'axios';

export default function Register(){

    const [datos, setDatos] = useState({
        nombre: '',
        contraseña: ''
    });

    const [mensaje, setMensaje] = useState();
    const [loading, setLoading] = useState(false);
 
    const { nombre, contraseña } = datos;

    const HandleChange = (e) => {
        setDatos({ ...datos, [e.target.name]: e.target.value })
    }

    const onSubmit = async (e) => {
        e.preventDefault()
        if(nombre !== '' && contraseña !== '') {
            const Usuario = {
                nombre, 
                contraseña
            };
            //setLoading(true)
            await axios
            .post('http://localhost:4000/register', Usuario)
            .then(({data}) => console.log(data))
        }
    }

    const navigate = useNavigate();

    return(
        <div > 
            <h2>Bienvenido a Multiventas</h2>
            <h3>Registrese para continuar</h3>
            <form onSubmit={(e) => onSubmit(e)}>
                <div>
                    <label htmlFor="nombre">Nombre</label>
                    <input 
                    onChange={(e) => HandleChange(e)}
                    type="text" 
                    id='nombre' 
                    name='nombre' 
                    placeholder='Ejm: Juan' 
                    autoComplete="off"
                    />
                </div>

                <div>
                    <label htmlFor="contraseña">Contraseña</label>
                    <input 
                    onChange={(e) => HandleChange(e)}
                    type="password" 
                    id='contraseña' 
                    name='contraseña'  
                    autoComplete="off"
                    />
                </div>

                <button type="submit"> Registrarme </button>
                <p>
                    ¿Ya tienes cuenta?
                    <b onClick={() => navigate('/login')} style={{cursor: 'pointer'}} >Iniciar Sesion</b>
                </p>

            </form>
        </div>
    )
};

introducir el código aquíHola Hola que tal como andan? tengo un problema de emergencia, resulta que estoy haciendo un formulario de registro y login con react, pero resulta que a la hora de llenar el form y enviar los datos, el servidor me responde con que falta llenar los campos,yo puse que en el servidor de express que en caso de que se envien campos vacios se responda asi pero lleno los campos en el formulario y de igual manera me envia este error, he buscado en todos lados pero no enecuentro una solucion, aqui mando imagenes del codigo y del problema, gracias por la atencion.

introducir el código aquíHola que tal como andan? tengo un problema de emergencia, resulta que estoy haciendo un formulario de registro y login con react, pero resulta que a la hora de llenar el form y enviar los datos, el servidor me responde con que falta llenar los campos,yo puse que en el servidor de express que en caso de que se envien campos vacios se responda asi pero lleno los campos en el formulario y de igual manera me envia este error, he buscado en todos lados pero no enecuentro una solucion, aqui mando imagenes del codigo y del problema, gracias por la atencion.

Hola que tal como andan? tengo un problema de emergencia, resulta que estoy haciendo un formulario de registro y login con react, pero resulta que a la hora de llenar el form y enviar los datos, el servidor me responde con que falta llenar los campos,yo puse que en el servidor de express que en caso de que se envien campos vacios se responda asi pero lleno los campos en el formulario y de igual manera me envia este error, he buscado en todos lados pero no enecuentro una solucion, aqui mando imagenes del codigo y del problema, gracias por la atencion.

se añadieron 460 caracteres en el cuerpo
Origen Enlace

Holaintroducir el código aquíHola que tal como andan? tengo un problema de emergencia, resulta que estoy haciendo un formulario de registro y login con react, pero resulta que a la hora de llenar el form y enviar los datos, el servidor me responde con que falta llenar los campos,yo puse que en el servidor de express que en caso de que se envien campos vacios se responda asi pero lleno los campos en el formulario y de igual manera me envia este error, he buscado en todos lados pero no enecuentro una solucion, aqui mando imagenes del codigo y del problema, gracias por la atencion.

`const bcrypt = require('bcrypt'); const Usuario = require('../Model/User')

//Users login and register

const register = async(req, res) => { const { Nombre, Contraseña } = req.body;

Usuario.findOne({ Nombre }).then(user => {
    if(user) {
        return res.json({mensaje : "Ya existe ese usuario"})
    } else if(!Nombre || !Contraseña) {
        return res.json({mensaje: "Falta el nombre o contraseña"})
    }else{
        bcrypt.hash(Contraseña, 10, (error, passwordHashed) => {
            if(error) res.json({error})
            else {
                const newUser = new Usuario({
                    Nombre, 
                    Contraseña: passwordHashed
                });
                newUser.save()
                .then((usuario) => {
                    res.json({mensaje: 'Usuario creado satisfactoriamente', usuario})
                })
                .catch(err => console.error('Hubo un error ' + err))
            }
        })
    }
})

}

const login = async (req, res) => { const {Nombre, Contraseña} = req.body;

Usuario.findOne({Nombre}).then(usuario => {
    if(!usuario){
        return res.json({mensaje: "No existe ese usuario"})
    }
    bcrypt.compare(Contraseña, usuario.Contraseña).then(password => {
        if(password) {
            const {id, Nombre} = usuario;
            res.json({mensaje: 'Usuario logeado', usuario: {
                id, 
                Nombre
            }})
        }else{
            return res.json({mensaje: 'Contraseña incorrecta'})
        }
    })
})

}

module.exports = { login, register }`


import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import axios from 'axios';

export default function Register(){

   const [datos, setDatos] = useState({
       nombre: '',
       contraseña: ''
   });

   const [mensaje, setMensaje] = useState();
   const [loading, setLoading] = useState(false);

   const { nombre, contraseña } = datos;

   const HandleChange = (e) => {
       setDatos({ ...datos, [e.target.name]: e.target.value })
   }

   const onSubmit = async (e) => {
       e.preventDefault()
       if(nombre !== '' && contraseña !== '') {
           const Usuario = {
               nombre, 
               contraseña
           };
           //setLoading(true)
           await axios
           .post('http://localhost:4000/register', Usuario)
           .then(({data}) => console.log(data))
       }
   }

   const navigate = useNavigate();

   return(
       <div > 
           <h2>Bienvenido a Multiventas</h2>
           <h3>Registrese para continuar</h3>
           <form onSubmit={(e) => onSubmit(e)}>
               <div>
                   <label htmlFor="nombre">Nombre</label>
                   <input 
                   onChange={(e) => HandleChange(e)}
                   type="text" 
                   id='nombre' 
                   name='nombre' 
                   placeholder='Ejm: Juan' 
                   autoComplete="off"
                   />
               </div>

               <div>
                   <label htmlFor="contraseña">Contraseña</label>
                   <input 
                   onChange={(e) => HandleChange(e)}
                   type="password" 
                   id='contraseña' 
                   name='contraseña'  
                   autoComplete="off"
                   />
               </div>

               <button type="submit"> Registrarme </button>
               <p>
                   ¿Ya tienes cuenta?
                   <b onClick={() => navigate('/login')} style={{cursor: 'pointer'}} >Iniciar Sesion</b>
               </p>

           </form>
       </div>
   )
};

Hola que tal como andan? tengo un problema de emergencia, resulta que estoy haciendo un formulario de registro y login con react, pero resulta que a la hora de llenar el form y enviar los datos, el servidor me responde con que falta llenar los campos,yo puse que en el servidor de express que en caso de que se envien campos vacios se responda asi pero lleno los campos en el formulario y de igual manera me envia este error, he buscado en todos lados pero no enecuentro una solucion, aqui mando imagenes del codigo y del problema, gracias por la atencion.

`const bcrypt = require('bcrypt'); const Usuario = require('../Model/User')

//Users login and register

const register = async(req, res) => { const { Nombre, Contraseña } = req.body;

Usuario.findOne({ Nombre }).then(user => {
    if(user) {
        return res.json({mensaje : "Ya existe ese usuario"})
    } else if(!Nombre || !Contraseña) {
        return res.json({mensaje: "Falta el nombre o contraseña"})
    }else{
        bcrypt.hash(Contraseña, 10, (error, passwordHashed) => {
            if(error) res.json({error})
            else {
                const newUser = new Usuario({
                    Nombre, 
                    Contraseña: passwordHashed
                });
                newUser.save()
                .then((usuario) => {
                    res.json({mensaje: 'Usuario creado satisfactoriamente', usuario})
                })
                .catch(err => console.error('Hubo un error ' + err))
            }
        })
    }
})

}

const login = async (req, res) => { const {Nombre, Contraseña} = req.body;

Usuario.findOne({Nombre}).then(usuario => {
    if(!usuario){
        return res.json({mensaje: "No existe ese usuario"})
    }
    bcrypt.compare(Contraseña, usuario.Contraseña).then(password => {
        if(password) {
            const {id, Nombre} = usuario;
            res.json({mensaje: 'Usuario logeado', usuario: {
                id, 
                Nombre
            }})
        }else{
            return res.json({mensaje: 'Contraseña incorrecta'})
        }
    })
})

}

module.exports = { login, register }`

introducir el código aquíHola que tal como andan? tengo un problema de emergencia, resulta que estoy haciendo un formulario de registro y login con react, pero resulta que a la hora de llenar el form y enviar los datos, el servidor me responde con que falta llenar los campos,yo puse que en el servidor de express que en caso de que se envien campos vacios se responda asi pero lleno los campos en el formulario y de igual manera me envia este error, he buscado en todos lados pero no enecuentro una solucion, aqui mando imagenes del codigo y del problema, gracias por la atencion.


import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import axios from 'axios';

export default function Register(){

   const [datos, setDatos] = useState({
       nombre: '',
       contraseña: ''
   });

   const [mensaje, setMensaje] = useState();
   const [loading, setLoading] = useState(false);

   const { nombre, contraseña } = datos;

   const HandleChange = (e) => {
       setDatos({ ...datos, [e.target.name]: e.target.value })
   }

   const onSubmit = async (e) => {
       e.preventDefault()
       if(nombre !== '' && contraseña !== '') {
           const Usuario = {
               nombre, 
               contraseña
           };
           //setLoading(true)
           await axios
           .post('http://localhost:4000/register', Usuario)
           .then(({data}) => console.log(data))
       }
   }

   const navigate = useNavigate();

   return(
       <div > 
           <h2>Bienvenido a Multiventas</h2>
           <h3>Registrese para continuar</h3>
           <form onSubmit={(e) => onSubmit(e)}>
               <div>
                   <label htmlFor="nombre">Nombre</label>
                   <input 
                   onChange={(e) => HandleChange(e)}
                   type="text" 
                   id='nombre' 
                   name='nombre' 
                   placeholder='Ejm: Juan' 
                   autoComplete="off"
                   />
               </div>

               <div>
                   <label htmlFor="contraseña">Contraseña</label>
                   <input 
                   onChange={(e) => HandleChange(e)}
                   type="password" 
                   id='contraseña' 
                   name='contraseña'  
                   autoComplete="off"
                   />
               </div>

               <button type="submit"> Registrarme </button>
               <p>
                   ¿Ya tienes cuenta?
                   <b onClick={() => navigate('/login')} style={{cursor: 'pointer'}} >Iniciar Sesion</b>
               </p>

           </form>
       </div>
   )
};

Origen Enlace
Loading