A simple guide on how to surround every incorrect input index in mapped inputs with red borders

Question

A simple guide on how to surround every incorrect input index in mapped inputs with red borders

I am incorporating a modal that corresponds each element of the object newCompanies to a specific row:

        {newCompanies.map((company, index) => {
          return (
            <div>
              <div
                className="side-by-side"
              >
                  <ModalInput
                    type="text"
                    id="name"
                    value={company.name}
                    onChange={(e) =>
                      this.editCompanyArr(index, "name", e, "validName")
                    }
                  ></ModalInput>
                  <ModalInput
                    type="text"
                    id="website"
                    value={company.website}
                    onChange={(e) =>
                      this.editCompanyArr(
                        index,
                        "website",
                        e,
                        "validWebsite"
                      )
                    }
                  ></ModalInput>
                      <ModalInput
                        type="text"
                        id="sector"
                        value={company.class}
                        onChange={(e) =>
                          this.editCompanyArr(
                            index,
                            "sector",
                            e,
                            "validSector"
                          )
                        }
                      ></ModalInput>

ModalInput is specifically defined in styles.js:

export const ModalInput = styled.input`
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #f5f6f9;
  border-radius: 20px;
  background-color: #f5f6f9;
  height: 100%;
  width: ${props => props.width || 'auto'};
`;

This function is responsible for verifying if a user has inputted a correct value. For example, if numbers are detected within the name field, the value of validName will be set to false:

  editCompanyArr(i, obj, e, stateObject) {
      const { newCompanies, validName } = this.state;
      if (e.target.value.match("^[a-zA-Z ]*$") != null) {
        this.setState({ [stateObject]: true });
      } else {
        this.setState({ [stateObject]: false });
      }
      //edited out more body to update value in newCompanies
}

My concern arises in ensuring that if a user provides an incorrect input for any specific row, only that particular input and not all others receive a red border. How can I achieve this?

javascript css reactjs

Answer 1

Answer №1

In order to achieve the desired outline effect, I recommend adding a CSS class that will style the inputs accordingly. By keeping track of the input's validity with a flag in the state, you can update the error status on submit and clear it when the user interacts with the input field.

Here is an example implementation using JSX:

const Form = () => {
  const [inputError, setInputError] = useState(false);
  const exampleInputRef = useRef(null);

  return (
    <form onSubmit={(e) => {
      const exampleInput = exampleInputRef.current;
      const exampleInputVal = exampleInput.value;

      if (exampleInputVal) {
        // Valid value - proceed with submission
      } else {
        // Invalid input - set error state
        setInputError(true);
      }
    }}>
      <input 
        className={inputError ? 'error' : ''} 
        ref={exampleInputRef}
        onChange={() => setInputError(false)}
        onFocus={() => setInputError(false)}
      />
    </form>
  );
}

Additionally, here is the corresponding CSS code snippet for the error styling:

input.error,
input:focus.error {
  outline: none;
  box-shadow: 0 0 0 1px red;
}

Answer 2

In order to achieve the desired outline effect, I recommend adding a CSS class that will style the inputs accordingly. By keeping track of the input's validity with a flag in the state, you can update the error status on submit and clear it when the user interacts with the input field.

Here is an example implementation using JSX:

const Form = () => {
  const [inputError, setInputError] = useState(false);
  const exampleInputRef = useRef(null);

  return (
    <form onSubmit={(e) => {
      const exampleInput = exampleInputRef.current;
      const exampleInputVal = exampleInput.value;

      if (exampleInputVal) {
        // Valid value - proceed with submission
      } else {
        // Invalid input - set error state
        setInputError(true);
      }
    }}>
      <input 
        className={inputError ? 'error' : ''} 
        ref={exampleInputRef}
        onChange={() => setInputError(false)}
        onFocus={() => setInputError(false)}
      />
    </form>
  );
}

Additionally, here is the corresponding CSS code snippet for the error styling:

input.error,
input:focus.error {
  outline: none;
  box-shadow: 0 0 0 1px red;
}

Answer 3

Answer №2

If you're looking to explore a different approach, consider the following:

Start by defining the necessary state variables. I opted for state variables named name and age for input values. Additionally, I included state variables for classes to trigger component re-renders and update border colors upon changes.

To initiate the process, I pre-set some initial className values so that the initial render displays a red border (utilizing border-danger from Bootstrap).

// initial classes
const initialClassNames = {
  name: "border-danger",
  age: "border-danger",
};

// required states
const [classNames, setClassNames] = useState(initialClassNames);
const [values, setValues] = useState({ name: "", age: 0 });

Subsequently, I associated distinct fields with their individual specifications which can be mapped later on. Notice how the state values are linked to the input field specifications.

// specs for all input fields
const inputFields = [
  {
    inputLabel: "Name",
    inputName: "name",
    inputValue: values.name,
    inputClassName: classNames.name
  },
  {
    inputLabel: "Age",
    inputName: "age",
    inputValue: values.age,
    inputClassName: classNames.age
  }
];

Within the return() function, each field is mapped over to provide the desired JSX elements.

return (
  <div className="container mt-3">
    {inputFields.map((f, i) => {
      return (
        <div className="mb-5" key={i}>
          <label htmlFor={`${f.inputName}${i}`}>{f.inputLabel}</label>
          <input
            id={`${f.inputName}${i}`}
            name={f.inputName}
            value={f.inputValue}
            onChange={handleChange}
            className={`form-control ${f.inputClassName}`}
          ></input>
        </div>
      );
    })}
  </div>
);

For handling change events in your inputs, utilize the following approach:

// handleChange for inputs
const handleChange = (e) => {
  e.preventDefault();
  setValues({
    ...values,
    [e.target.name]: e.target.value
  });
};

Additionally, validation can be implemented as shown below:

useEffect(() => {
  // validate name
  if (values.name) {
    setClassNames((prevState) => {
      return { ...prevState, name: (prevState.name = "border-success") };
    });
  } else {
    setClassNames((prevState) => {
      return { ...prevState, name: (prevState.name = "border-danger") };
    });
  }

  // validate age
  if (parseInt(values.age, 10)) {
    setClassNames((prevState) => {
      return { ...prevState, age: (prevState.age = "border-success") };
    });
  } else {
    setClassNames((prevState) => {
      return { ...prevState, age: (prevState.age = "border-danger") };
    });
  }
}, [values.name, values.age]);

Inside the useEffect() function, I verify whether the input fields are appropriately filled every time their values change (leading to component re-renders). Consequently, based on the validation result, I adjust the class names accordingly. In this illustration, Bootstrap classes like border-danger and border-success were used, but feel free to customize this according to your styling preferences.

Should you prefer validation only upon a specific event such as a button onClick(), that too can be accommodated.

View codesandbox example

Answer 4

If you're looking to explore a different approach, consider the following:

Start by defining the necessary state variables. I opted for state variables named name and age for input values. Additionally, I included state variables for classes to trigger component re-renders and update border colors upon changes.

To initiate the process, I pre-set some initial className values so that the initial render displays a red border (utilizing border-danger from Bootstrap).

// initial classes
const initialClassNames = {
  name: "border-danger",
  age: "border-danger",
};

// required states
const [classNames, setClassNames] = useState(initialClassNames);
const [values, setValues] = useState({ name: "", age: 0 });

Subsequently, I associated distinct fields with their individual specifications which can be mapped later on. Notice how the state values are linked to the input field specifications.

// specs for all input fields
const inputFields = [
  {
    inputLabel: "Name",
    inputName: "name",
    inputValue: values.name,
    inputClassName: classNames.name
  },
  {
    inputLabel: "Age",
    inputName: "age",
    inputValue: values.age,
    inputClassName: classNames.age
  }
];

Within the return() function, each field is mapped over to provide the desired JSX elements.

return (
  <div className="container mt-3">
    {inputFields.map((f, i) => {
      return (
        <div className="mb-5" key={i}>
          <label htmlFor={`${f.inputName}${i}`}>{f.inputLabel}</label>
          <input
            id={`${f.inputName}${i}`}
            name={f.inputName}
            value={f.inputValue}
            onChange={handleChange}
            className={`form-control ${f.inputClassName}`}
          ></input>
        </div>
      );
    })}
  </div>
);

For handling change events in your inputs, utilize the following approach:

// handleChange for inputs
const handleChange = (e) => {
  e.preventDefault();
  setValues({
    ...values,
    [e.target.name]: e.target.value
  });
};

Additionally, validation can be implemented as shown below:

useEffect(() => {
  // validate name
  if (values.name) {
    setClassNames((prevState) => {
      return { ...prevState, name: (prevState.name = "border-success") };
    });
  } else {
    setClassNames((prevState) => {
      return { ...prevState, name: (prevState.name = "border-danger") };
    });
  }

  // validate age
  if (parseInt(values.age, 10)) {
    setClassNames((prevState) => {
      return { ...prevState, age: (prevState.age = "border-success") };
    });
  } else {
    setClassNames((prevState) => {
      return { ...prevState, age: (prevState.age = "border-danger") };
    });
  }
}, [values.name, values.age]);

Inside the useEffect() function, I verify whether the input fields are appropriately filled every time their values change (leading to component re-renders). Consequently, based on the validation result, I adjust the class names accordingly. In this illustration, Bootstrap classes like border-danger and border-success were used, but feel free to customize this according to your styling preferences.

Should you prefer validation only upon a specific event such as a button onClick(), that too can be accommodated.

View codesandbox example

A simple guide on how to surround every incorrect input index in mapped inputs with red borders

Answer №1

Answer №2

Similar questions

Retrieve data from AJAX once the cycle is complete

How do I use jQuery to animate a height increase where the added height is applied to the top of the element?

Eliminate the unnecessary gap below the image

What is the solution for the error "At-rule or selector required" ?

Guide on subscribing to an object from a service in Angular 2/5

Steps for iterating through an array within an object

Turn off HTML5 Audio

Is there a way to adjust the placement of the h1 tag using the before pseudo-element?

Error: webpack is failing to load the style and CSS loaders

Creating Spinning Text Effects in Internet Explorer with CSS

Retrieving data from Node.js within an Angular application

Strategies for capturing POST data sent to a JavaScript webpage

I am struggling to figure out how to incorporate a minimum 5-character validation requirement into the login form of this ant design. Unfortunately, I

Exploring Tailwind CSS for customizing the Material-UI "DateCalendar" component aesthetics

Fade out the notification div when the user clicks anywhere outside of it

New Feature in Material UI V5: Ability to Specify Multiple Variants in the Primary Palette when Creating Theme

An error with rendering in Internet Explorer 8

Can the :after pseudo-element be modified when hovering, except when hovering over the after element itself?

Trouble displaying JSON data when using a search box filter in React

Issue with Vuetifyjs theme variable failing to function properly in version 1.0.0