Use the input field to show error instead of adding error message below the input in ReactJS

Question

I have created a ReactJS application having a login form of 2 input fields.
And for the validation I have used regex to make it. 
Now when there is an validation error I have used a state and shown it below the input field. But instead of showing it below the input field I want the input field itself as an error. 
Is there a way I can do that if yes please guide me or tell me an alternative to it how i can achieve the functionality mentioned.

In below code the formErrors is the state I used to show the errors of the particular input field which I don't want that way now.

I want to achieve a way in which I can make the input field show the error and I should not have a use to add a state to display the input field error. So, then I can style the input field for user interaction.

Here is my code:

    import React, {useState, useEffect} from 'react'
        
        const Design1 = () => {
        
            const initialvalues = {email:"", password:""}
            const [formValues, setFormValues] = useState(initialvalues);
            const [formErrors, setFormErrors] = useState({});
            const [isSubmit, setIsSubmit] = useState(false);
        
        
            const handleChange = (e) =>{
                const{ name, value} = e.target;
                setFormValues({...formValues, [name]:value});
                console.log(formValues);
            }
        
            const handleSubmit = (e) =>{
                e.preventDefault();
                setFormErrors(validate(formValues));
                setIsSubmit(true);
            }
        
            useEffect(()=>{
                console.log(formErrors);
                if (Object.keys(formErrors).length === 0 && isSubmit) {
                    console.log(formValues);
                }
            },[formErrors])
        
        
        
            const validate = (values) =>{
                const errors = {}    
                const regexp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{4,12}$/;
                const regexe = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
                if(!values.email){
                    errors.email = "Email is required!";
                }else if(!regexe.test(values.email)){
                    errors.email = "This is not Valid email format";
                }
        
                if(!values.password){
                    errors.password = "Password is required";
                }else if(!regexp.test(values.password)){
                    errors.password = "passsword must contain atleast one uppercase,lowercase,number,special character";
                }
                else if(values.password.length < 4){
                    errors.password = "Password must me more than 4 characters";
                }else if (values.password.length > 6){
                    errors.password = "Password cannot be more than 6 characters";
                }
                return errors;
            }
        
        
          return (
            <>
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12">
                                <form onSubmit={handleSubmit}>
                                    <div className="form-group">
                                        <input className="form-control" 
                                                placeholder="[email protected]" 
                                                name="email" type="text"
                                                value={formValues.email}
                                                onChange={handleChange}
                                                />
      //this is the part I have used the error message                                    
<p>{formErrors.email}</p>
                                    </div>
                                    
                                    
                                    <button className="btn btn-lg btn-success" 
                                            type="submit">Submit</button>
                                </form>
                            </div>
                        </div>
            </div>
            </>
          )
        }
        
        export default Design1;

So what i want is basically the input field itself should show the error according to the regex instead of using a state and displaying the error message below the input field

Answer 1

If there is an error and you want to show it in the input field then you can do it by assigning the placholder of that input dynamically like below:

export default function App() {
  const errors = {
    email: ""
  };

  return (
    <div className="App">
      <input
        type="text"
        className={`${errors.email}` ? 'error-control' : 'form-control'}
        placeholder={`${errors.email}` ? `${errors.email}` : "Enter your email"}
      />
    </div>
  );
}

And CSS for displaying red border if there is an error

.form-control {
  border: 1px solid black
}

.error-control {
  border: 1px solid red
}