Change text input border color

Question

I want to make a form where data is verified using JavaScript before being sent. When a field is empty, I want to set its border to red.

HTML code:

<label>Question: </label><input type = "text" maxlength = "100" name = "question"> <br />

JavaScript code 1:

fields[i].style.borderColor = "red";

JavaScript code 2:

fields[i].style.border = "1px solid red";

If I use JS code 1, the border changes its color but it has the width bigger than before (even though I do not say anything about border width). If I use JS code 2, the text input shrinks with 2px and the change is noticeable.

What should I do to change only the border color?

Answer 1

Actually this is preferred by adding and removing classes:

$("input").change(function()
  {
     var value = $(this).val();
     if(value=="")
     {
          $(this).addClass("red-border");
          $(this).focus();
     }else
     {
          $(this).removeClass("red-border");
     }
  });

And your CSS:

.red-border{
    border: 1px solid red;
}

Answer 2

The default user agent stylesheet uses this for the input field:

border: 2px inset;

Now you may ask why is this not defined by default?

by default(In IE the appreance is hard-coded):

appearance: textfield;

But whenever you change something:

appearance: none;

And when the appearance is none, you will see the 2px inset border.

So actually the width is the problem here:

So you want to change 2 propeties: Border-width and border-color
You would need 2 lines now:

document.getElementsByTagName('input')[0].style.border = "red";
document.getElementsByTagName('input')[0].style.borderWidth = "1px";

jsFiddle

However your own solution might be elegant, as it is defined with one line of code:

fields[i].style.border = "1px solid red";

---

Note that the inset style sets the top and right border lighter where the bottom and left border is the given color. Setting the style to solid will solve this.

It won't harm your code to use the whole shorthand property of border. You always have to be very specific when you want to win the battle with the user agent stylesheet .

Answer 3

I have something like this in production, only it uses alerts instead of color change. Use CSS Styles & classes:

CSS

.error {
    border:2px solid red;
}

JavaScript

<script>
function checkField(){
    var f = document.getElementById('<name of field>').value;
    if (f === "") {
       document.getElementById('<name of field>').className = document.getElementById('<name of field>').className + " error";
       return false;
    }
}
</script>

Then add this to your button/control's click event:

return checkField()

This SO post seems to be similar: changing textbox border colour using javascript

Answer 4

Use outline instead of border.

fields[i].style.outline = "1px solid red" ;

Answer 5

Try this out. Jquery

 $("input").change(function ()
  {
     var value = this.value;
     if(value=="")
     {
          $(this).css("border", "1px solid red");
     }else
     {
        $(this).css("border",'');
     }
  }).trigger("change");

Html

  <input type="text" class="col">