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?

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?

• javascript
• html
• css

5 Answers 5

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

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

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.

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

Use outline instead of border.

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

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