Javascript change input field color

Question

i have this code(works fine) that changes the color of all fields wheather the field is empty or not:

document.querySelectorAll("input").forEach((inp) => { inp.addEventListener("focusout", () => { let value = inp.value.split(" ").join(""); if (value == "") inp.style.backgroundColor = 'red'; else inp.style.backgroundColor = 'green'; }); });

Now i want to validate the first name field, it should only be able to input letters. If it is wrong, i want it to show it as red. i tried with the following code but it doesnt work. Any ideas?

let firstName = document.querySelector("#fname"); firstName.addEventListener("focusout", () => { if (typeof firstName.value != "string") { firstName.value.style.backgroundColor = "red"; console.log(firstName.value); } else { firstName.value.style.backgroundColor = "green"; } });

The value will always be a string, even if it's an empty one. — Andy
– Andy, Commented Jul 29, 2021 at 12:50
Because the value will always be a string, even if it's a number. — Andy
– Andy, Commented Jul 29, 2021 at 12:57

Giovanni Esposito · Accepted Answer · 2021-07-29 12:55:52Z

You could use a Regex to check if string has number. Something like:

let firstName = document.querySelector("#fname"); firstName.addEventListener("focusout", () => { let hasNumber = /\d/; if (hasNumber.test(firstName.value)) { firstName.value.style.backgroundColor = "red"; console.log(firstName.value); } else { firstName.value.style.backgroundColor = "green"; } });

Andy · Accepted Answer · 2021-07-29 12:56:16Z

value will always be a string so you should test what characters the string contains instead, and you can do this with a regular expression that tests that it only contains letters from the alphabet.

let firstName = document.querySelector("#fname"); firstName.addEventListener("focusout", () => { if (!/[a-zA-Z]+/.test(firstName.value)) { firstName.style.backgroundColor = "#FF374E"; } else { firstName.style.backgroundColor = "#c0eb34"; } });

<input id="fname" />

Collectives™ on Stack Overflow

Javascript change input field color

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related