CODEWITHSUNDEEP
javascriptreactjsformsvalidationjsx
Ime En
Ime En

Reputation: 31

Forms validation condition With react

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

Upvotes: 3

Views: 1203

Answers (3)

akhtarvahid
akhtarvahid

Reputation: 9779

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>}

Upvotes: 2

Yoel
Yoel

Reputation: 7985

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

Upvotes: 2

TokaLazy
TokaLazy

Reputation: 148

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.

Upvotes: 1

Related Questions