Forms validation condition With react

user_14521149 0
Viewed 921

I'm learning reactjs and I have a problem with the validation in forms so I want to have a condition if the user don't enter his name a message 'empty field' appear

else alert hello 'his name' appears

My code

import React ,{Component} from 'react';
class Formular extends Component {
    constructor(props) {
      super(props);
      this.state={
          nom:'',
          prenom:'',
          email:'',
          password:'',
          error:false,
          NameErr:''
      }
      
    }
    
    handleValidation() {
         if (this.state.nom =='')
         { this.state.error=true
           this.state.NameErr='empty field'
            //console.log( this.state.NameErr)
            return(
                this.state.NameErr
            )
        }
    }
    
    handleClick(event){
        event.preventDefault()
        let error = this.handleValidation()
        if (!error)  
        { 
            alert('hello '+ this.state.nom)
        } 
    }
 

    render() {
       /*  console.log('nom',this.state.nom)
        console.log('prenom',this.state.prenom) */
        return (
        <div >
            <div className="form__group field">
                <input type="input" className="form__field" 
                placeholder="Name" name="name" id='name' 
                required size='100' value={this.state.nom}  
                onChange={(event)=>this.setState({nom:event.target.value})} />
                <label for="name" className="form__label">Name</label>
            </div>

            <div className='alert'> {this.state.NameErr}  </div>
             
export default Formular
jsx reactjs validation forms javascript
3 Answers

You must not change the state by force

like this

this.state.NameErr='empty field'
this.state.error=true

You need to use setState

like this example

this.setState({NameErr:'empty field',error:true})

then you can in render method

{ this.state.error && <div className='alert'> {this.state.NameErr}</div>}

Thus the element will only be displayed if there is an error

user_91614780

Mutation of state isn't correct, always mutate state using setState()

this.setState({NameErr:'empty field', error: true})

jsx

{this.state.error && <div className='alert'> {this.state.NameErr}  </div>}
user_65444600

First, you should wrap your input in form tag instead simply div. Next use event onSubmit on your form to trigger submission of the form.

Create un method to check if your value is not empty, then do what you want

render () {

  return <form onSubmit={handleClick}>
    <div className="form__group field">
      <input 
        id='name' name="name"  type="text" 
        className="form__field" 
        size='100' required 
        placeholder="Name" value={this.state.nom}
        onChange={(event)=>this.setState({nom:event.target.value})} 
      />
      <label for="name" className="form__label">Name</label>
    </div>;

    <div className='alert'> {this.state.NameErr}  </div>
  </form>;
}

NT: type attribute of input should be "text" and not "input"

EDIT: Like said other guys, change also your changing state.

user_50440340
Related