Question

I’m using the following code…

if (theForm.textOne.value.trim() == "" || theForm.textTwo.value.trim() == "")
{
alert("part of the form is blank");
document.getElementById("textTwo").style.borderColor="red";
}

The problem is that the red color disappears when the alert goes away. How do I get the border to stay that color?

Answer 1

In order for borders to apear, you need more than border-color for it to display : you also need the border-style and the border-width

Also it exists libraries to help you manipulate html doccument

Look at this JQuery goodness :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
   $(function(){
      $("form").submit(function() {
        var valid = true;
        $("form #textTwo, form #textOne").each(function(){
           if ($(this).val().trim() == "")
           {
              $(this).css("border","1px #ff0000 solid");
              valid = false;
           }
        });
        if(!valid){
           alert("part of the form is blank");
           return false;
        }
      });
   })
</script>

To lean more : http://jquery.com/