Email Form React

Question

Email Form React

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I made a simple validation using react , and I would like the message 'b' to be available only when the user clicked on submit how can I do it?

export default class LoginApp extends React.Component {

  validarEmail=(e)=>{
       e.preventDefault();
       const email = e.target.elements.email.value;
       const password = e.target.elements.password.value.length;
       const emailValid = validator.isEmail(email)
       if(emailValid === false){
         console.log('email incorreto, favor verificar')
       }else if(password < 8 ){
          console.log('senha é muito curta, favor informar uma de maior numero de caracteres')
       }else{
         console.log('email e senha corretos')
       }
  }
    render() {  
      return (
        <div>
        <Header />
          <div className="container-app">
          <form method="get" name="modal_form" onSubmit={this.validarEmail}>
            <div className="form-group">
              <label>Email address</label><br/>
              <input className="form-control" name="email"
              />
              {!!this.validarEmail.emailValid ? <p>a</p>:<p>b</p>}
            </div>
            <div className="form-group">
              <label>Password</label><br/>
              <input className="form-control" name="password"
              />
              {!!this.validarEmail.password < 8 ? <p>a</p>:<p>b</p>}
            </div>
            <button type="submit" className="button" >Submit</button>
          </form>
        </div>
        </div>

      );
    }
  }

email react password

asked by anonymous 15.03.2018 / 14:32

2 answers

0

You can use redux-forms to make your code look more elegant and better for future maintenance, see an example validation with redux-form:

link

If you have limitations and can not use redux-forms, you can use the state to make this control, if you need or post an example here.

15.03.2018 / 14:52

Help in Sql that queries 2 fields from the same table help with include php in wordpress

score 0 · Accepted Answer

The ideal is to use state. It starts with the state so the message is not visible. The most appropriate place to do this is in the constructor that has not yet been defined:

export default class LoginApp extends React.Component {
    constructor(props){
        super(props);
        this.validarEmail = this.validarEmail.bind(this);
        this.state = {
            valido: false //iniciar estado de valido a falso (escondido)
        };
    }

Then when you validate the email, it changes the status of valido to true :

validarEmail=(e)=>{
     e.preventDefault();
     const email = e.target.elements.email.value;
     const password = e.target.elements.password.value.length;
     const emailValid = validator.isEmail(email)
     if(emailValid === false){
       console.log('email incorreto, favor verificar')
     }else if(password < 8 ){
        console.log('senha é muito curta, favor informar uma de maior numero de caracteres')
     }else{
       console.log('email e senha corretos')
       this.setState(() => { /*altera o estado aqui*/
           return { valido: true };
       });
     }
}

No render now displays the message only if valido is set to true. For simplicity you can use the && operator which is most common in react:

render() {  
  return (
    <div>
    <Header />
    ...
    { this.state.valido && <p>b</p> }
    ...