javascript - validacion - validar formulario php antes enviar

La validación de envío de Formularios Redux no establece mensajes de error

Question

Estoy tratando de hacer una forma con la validación de envío. Cuando envío el formulario, mi handleSubmit dispara y lanza SubmissionError , pero ya no pasa nada.

Enviar (solo arrojar error cada vez):

function submit(values)
{
   console.log(values);
   throw new SubmissionError({ password: ''Wrong password'', _error: ''Login failed!'' });
}

Renderizar campo de ejemplo:

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
     <input {...input} placeholder={label} type={type}/>
     {touched && error && <span>{error}</span>}
   </div>
  </div>
 )

Mi forma:

class LoginForm extends Component {
  render()
  {
    const {  error, handleSubmit, pristine, reset, submitting  } = this.props
    console.log(error);
    return (
      <div>
        <form onSubmit={handleSubmit}>
          <h1>Login</h1>
          <Field name="email" type="text" component={renderField} label="Username"/>
          <Field name="password" type="text" component={renderField} label="Username"/>
           {error && <strong>{error}</strong>}
          <button type = "submit">Login</button>
        </form>
      </div>
     )
  }
}

LoginForm = reduxForm({
    form: ''login'',
    onSubmit: submit
})(LoginForm);

export default LoginForm;

Cuando presiono Submit , se llama a la función de envío, se lanza una excepción, pero no ocurre nada más y los mensajes de error en forma y renderField representación no se muestran.

Answer 1

Necesita agregar un método de validación al constructor reduxForm de la siguiente manera:

function validateInput(input) {
  let errors = {}

  if (!data.email) {
    errors.email = "Email is required."
  } 

  if (!data.password) {
    errors.password = "Password is required."
  }

  return errors 
}

const loginForm = reduxForm({
  form: ''login'',
  onSubmit: submit,
  validate: validateInput
})

Esto causará que la forma redux muestre los errores bajo el campo de entrada si no son válidos.

Por supuesto, debe conectar su componente con react-redux connect para que funcione de la siguiente manera:

export default connect(mapStateToProps)(loginForm(LoginForm)) 

Answer 2

Un error arrojable que se utiliza para devolver los errores de validación de onSubmit. El propósito es distinguir el rechazo de promesas debido a errores de validación por rechazo de promesas debido a problemas de E / S de AJAX u otros errores del servidor. documentos

Por lo tanto, el objetivo de SubmissionError no es arrojar un error directamente. Use esto cuando esté haciendo alguna promise como la solicitud API, es decir,

  return axios
     .post(''/sessions/login'', values)
     .then((res) => {
           // do something with response
     })
     .catch((err) => {
           throw new SubmissionError(err.response.data);
     });