it's a simple code that changes the input area outline colour if it fails my validation but it is taking no style from my js and I don't know what's wrong. the element style shows up when I inspect the element but it just doesn't render
export const Form = ({ urlText }) => {
let inputStyle = {
border: "red 10px !important",
};
const [text, setText] = useState("");
function ValidateUrl(link) {
var urlFormat =
/[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
if (link.match(urlFormat)) {
return true;
} else {
return false;
}
}
const onSubmit = (e) => {
e.preventDefault();
if (ValidateUrl(text)) {
urlText(text);
} else {
inputStyle = {
outline: "solid 1px hsl(0, 87%, 67%)",
};
alert("wrong url");
}
};
return (
<div>
<div>
<form onSubmit={onSubmit} className="form">
<div>
<input
onChange={(e) => setText(e.target.value)}
style={inputStyle}
type="text"
size="30"
id="url"
placeholder="Shorten a link here..."
/>
</div>
<div>
<button type="submit" className="main-btn">
Shorten It!
</button>
</div>
</form>
</div>
</div>
);
};
the border syntax should look like this: width | style | color so: border: 10px solid red; and also delete !important it is unnecessary
Can you directly try
style={{border: '10px solid red'}}
if you wanna hold these types of styles you can use styled component.
decleare a use state [pressed,setPressed] = useState(false); then use this setPressed(true) in on press instead of inputStyle
if (ValidateUrl(text)) {
urlText(text);
} else {
setPressed(true);
alert("wrong url");
}
and finally in the input use this
style={pressed? {outline: " 1px solid hsl(0, 87%, 67%)"} : {border: '10px solid red'}}
I am not sure about hsl(0, 87%, 67%) part but if it is true this should work.