The input property for handling invalid input is currently malfunctioning. It triggers an error even when the input field is left empty. I would like the input border to be goldenrod when it's empty, turn red if the input doesn't match the specified pattern, and green if it meets the pattern requirement. The valid state works fine as it turns green, but the invalid state does not.
Here is the HTML code:
<input
className="text-field__input"
id={id}
name={name}
type={type}
placeholder={placeholder}
defaultValue={defaultValue}
required={required}
minLength={minlength}
title={title}
pattern={pattern}
/>
<label className="text-field__label" htmlFor={id}>
{label}
</label>
<TextField
id="username"
label="Username"
name="username"
type="text"
placeholder="user123"
pattern="[A-Za-z\d\.]{4,12}"
title="Username must be between 4 and 12 characters in length and contain only letters, numbers and periods"
required
/>
CSS (SCSS) styling:
.text-field__input {
display: flex;
width: 100%;
height: 4.8rem;
font-size: 1.6rem;
border-radius: 4px;
background-color: transparent;
padding: 0 1.6rem;
font-weight: bold;
border: 3px solid goldenrod;
&:focus {
outline: none;
}
&:valid {
border: 3px solid green;
}
&:invalid {
border: 3px solid red ;
}
&::placeholder {
color: rgba($hextechgold2, 0.5);
font-size: 0;
transition: 0.3s;
}
&:focus::placeholder {
font-size: 1.6rem;
}
}