In below image screenshot I make fields mandatory so click on register button If any fields then that empty field I want to highlight with red border in React how it is possible ? ()

constructor(props) {
    super(props);
    this.state = {
        firstName: '',
        lastName: '',
        email: '',
        password: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.registerForm = this.registerForm.bind(this);
}

handleChange(event) {
    this.setState({[event.target.name]: event.target.value});
}

registerForm(){
    if(this.state.firstName.trim() && this.state.lastName.trim() && 
       this.state.email && this.state.password){
         console.log("registration successfully..!!"); 
    }else{
         console.log("all * marked fields mandatory");
    }
}

render() {
  return (
    <div>
      <h2>Fill Registration Details..!!</h2>
        <InputGroup placeholder="Enter First Name...*"            
          name="firstName" value={this.state.firstName} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter Last Name...*" name="lastName" 
         value={this.state.lastName} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter your email...*" name="email"
         value={this.state.email} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter your password...*"name="password" 
         value={this.state.password} onChange={this.handleChange}/>

        <Button intent="Primary" onClick={this.registerForm}>Register</Button>
       </div>
    )
  }

In below image screenshot I make fields mandatory so click on register button If any fields then that empty field I want to highlight with red border in React how it is possible ? (https://blueprintjs./docs/#core/ponents/text-inputs)

constructor(props) {
    super(props);
    this.state = {
        firstName: '',
        lastName: '',
        email: '',
        password: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.registerForm = this.registerForm.bind(this);
}

handleChange(event) {
    this.setState({[event.target.name]: event.target.value});
}

registerForm(){
    if(this.state.firstName.trim() && this.state.lastName.trim() && 
       this.state.email && this.state.password){
         console.log("registration successfully..!!"); 
    }else{
         console.log("all * marked fields mandatory");
    }
}

render() {
  return (
    <div>
      <h2>Fill Registration Details..!!</h2>
        <InputGroup placeholder="Enter First Name...*"            
          name="firstName" value={this.state.firstName} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter Last Name...*" name="lastName" 
         value={this.state.lastName} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter your email...*" name="email"
         value={this.state.email} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter your password...*"name="password" 
         value={this.state.password} onChange={this.handleChange}/>

        <Button intent="Primary" onClick={this.registerForm}>Register</Button>
       </div>
    )
  }

• javascript
• html
• css
• reactjs
• validation

3 Answers 3

One solution, as @Saraband stated, is to modify your node's class name depending on whether or not your input field contains an error:

<InputGroup
  placeholder="Enter your password...*"
  name="password"
  className={this.state.password.length ? '' : 'error'}
  value={this.state.password}
  onChange={this.handleChange}
  />

You can then use it with the following CSS that will show a red border (for example) :

.error input
{
    border-bottom: 1px solid #eb516d;
}

Another way is to use the native required attribute of the input tag, but this method is hard to customize :

<input type='text' required/>

https://www.w3schools./tags/att_input_required.asp

For those who might be looking for a solution to this question, the solution below will only validate once the submit button is clicked. You can add a custom css class to style the input tag.

import React, { useState } from 'react';

const ValidateInput = () => {
  // set isSubmitting to false by default
  // this will make sure error class is not added by default
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [inputValue, setInputValue] = useState('');

  const submitHandler = (event) => {
    event.preventDefault();
    // this will trigger the error validation
    setIsSubmitting(true);
    // add the rest of the logic here
  };
  return (
    <form onSubmit={submitHandler}>
      <input
        value={inputValue}
        onChange={(event) => {
          setInputValue(event.target.value);
        }}
        className={isSubmitting && !inputValue ? 'error' : undefined}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ValidateInput;

You can create a CSS class - let's say .red-border and add it to your input whenever their value is empty (your ponent need to be able to use this className prop and pass it down to your <input /> native ponent)

<InputGroup
  placeholder="Enter your password...*"
  name="password"
  className={!this.state.password.length ? '' : 'red-border'}
  value={this.state.password}
  onChange={this.handleChange}
  />

Although it can be best to keep this sort of thing inside your InputGroup ponent thus confining the logic of your ponent to a single file

class InputGroup extends React.Component {
  // code

  render () {
    return(
      // code
      <input
        value={this.props.value}
        className={!this.state.password.length ? '' : 'red-border'}
        />
    );
  }
};