Changing Input Border Colour with JavaScript not working

Question

I've read a few questions on SO and I believe I am doing the right thing but it's still not working!

I am using plain old JavaScript as it's legacy code but if I have to I can probably use jQuery too.

I have my form which is of the form(no pun intended):

<form action="submit.php" method="post" name="myForm" onsubmit="return validateInfoForm()">
    <input type="text" class="boxes" name="Forename" id="Forename" placeholder="Forename" />
    ....
</form>

JS

function validateInfoForm()
{
    var b=document.forms["myForm"]["Forename"].value;
    var c=document.forms["myForm"]["Surname"].value;
    var f=document.forms["myForm"]["Postcode"].value;
    var g=document.forms["myForm"]["Telno"].value;
    var h=document.forms["myForm"]["Email"].value;

    if (b==null || b=="")
{
    alert("Enter Forename");
    document.getElementById('Forename').style.borderColor = "#FF0000";

   // before it was using document.forms["myForm"]["Forename"] as the selector but I changed it to try and get it to work. It was also doing .focus() rather than changing the border colour.

    return false;
}

Not receiving any errors, I simply get the alert box and then my cursor is placed inside the input, which I also don't want since it's removing the placeholder which is why I have removed the .focus() and attempting to change the colour instead.

Any ideas?

Answer 1

也尝试设置边框的宽度和样式。

Answer 2

我猜它正在改变边框的颜色，但是因为元素没有边框，所以没有应用它，请尝试：

 document.getElementById('Forename').style.border = "1px solid #ff0000";