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?

Yule · Accepted Answer · 2012-02-01 13:45:03Z

1

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";

answered Feb 1, 2012 at 13:45

Yule

9,8143 gold badges55 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

martincarlin87 Over a year ago

thanks, tried it but the result is the same. There is already a blue 2px border on all the text input elements so I think it should just change to red but even adding the width doesn't seem to affect it.

martincarlin87 Over a year ago

hmm thanks for that. I'm now completely confused why my code isn't working :(

martincarlin87 Over a year ago

got it in the end, looks like my script was working but then being over written somehow so I just moved it to the bottom of the page and it worked, thanks.

Roman · Accepted Answer · 2012-02-01 13:41:52Z

1

Try setting the border width and style too.

answered Feb 1, 2012 at 13:41

Roman

10.4k18 gold badges70 silver badges103 bronze badges

Comments

Tony Abaroa · Accepted Answer · 2021-09-23 04:14:00Z

0

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.

answered Sep 23, 2021 at 4:14

Tony Abaroa

212 bronze badges

Collectives™ on Stack Overflow

Changing Input Border Colour with JavaScript not working

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related