How to highlight empty mandatory(*) input field with red border click on button in React?

Question

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.com/docs/#core/components/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>
    )
  }

score 3 · Answer 1 · answered Jan 18 '19 at 15:28

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.com/tags/att_input_required.asp

I want to highlight when click on button field is empty but it highlights already if empty — Dharmesh, Jan 18 '19 at 15:58

bwanamaina · Answer 2 · 2020-11-24T18:03:38.017

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;

Saraband · Answer 3 · 2019-01-18T15:29:33.080

0

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

<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 component thus confining the logic of your component 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'}
        />
    );
  }
};

edited Jan 18 '19 at 15:29

answered Jan 18 '19 at 15:21

Saraband

1,540
10
18

Did you create the CSS class ? Also it's important that your `InputGroup` component knows how to pass down that className to its internal `input` native component. Can you post the code of your ÌnputGroup`component as well ? – Saraband Jan 18 '19 at 15:51
Also this thread might help you: https://stackoverflow.com/questions/30533171/react-js-conditionally-applying-class-attributes – Saraband Jan 18 '19 at 15:52
Saraband I want to highlight when click on button if field is empty but it highlights already if empty – Dharmesh Jan 18 '19 at 15:58
Please give me solution I need help when I click on button and field is empty then I want to highlight with red color border not empty time highlight click on button pleae give me solution – Dharmesh Jan 26 '19 at 11:06

How to highlight empty mandatory(*) input field with red border click on button in React?

3 Answers3