CODEWITHSUNDEEP
javascriptcss
martincarlin87
martincarlin87

Reputation: 11042

Changing Input Border Colour with JavaScript not working

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?

Upvotes: 1

Views: 3887

Answers (3)

Tony Abaroa
Tony Abaroa

Reputation: 21

I had the same issue, after much searching, i have this solution, try it...

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('#target {color: darkseagreen}');

// Apply the stylesheet to a document:
document.adoptedStyleSheets = [sheet];

It works for me.

Upvotes: 0

Yule
Yule

Reputation: 9754

I'm guessing it's changing the border color, but because the element doesn't have a border it's not applying it try:

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

Upvotes: 1

Roman
Roman

Reputation: 10403

Try setting the border width and style too.

Upvotes: 1

Related Questions