simple-react-validator icon indicating copy to clipboard operation
simple-react-validator copied to clipboard

How to change Input box red color while input box empty

Open senthilmca90 opened this issue 5 years ago • 3 comments

Hi, this is finding simple validation, but while hitting the submit button the input box is not showing red color

image

anyone can help me how to write condition red color bor.

senthilmca90 avatar Aug 08 '19 07:08 senthilmca90

Hi, any update on that? @senthilmca90 did you managed to find the solution

damanmokha avatar Jul 29 '20 13:07 damanmokha

My suggestion would be to define the validator above the input maybe in the top of the render() method for example and assign it to a variable. That way you can use the response to check if you should show a different border for the input and show the message below for example. If nothing is returned that means validation passed and will be null. Something like this:

render() {
  let emailValidator = this.validator.message('email', this.state.email, 'required|email')
  return (
    <div>
      <input className={emailValidator ? 'border-red' : 'border-default'} ....../>
      {emailValidator}
    </div>
  )
}

stuyam avatar Nov 12 '20 01:11 stuyam

how we do this in react native ?

Hansi4348 avatar Mar 28 '23 11:03 Hansi4348