title: JS Form Validation: adding a red border on input fields with errors; removing it on focus?
body: <p>I'm trying to set up some form validation for my website. What I want to achieve is: </p>
  
  <p>When JS detects an empty field, it puts a red border around it; and later, when the user focuses (puts the cursor in the input field) the border is removed and does not return. I tried doing it with CSS because it may have been a shorter way, however the red border returns once the user removes the input field out of focus. </p>
  
  <p>It seems like the problem is with the function parameter. Is JS unable to use the parameter (<code>fieldName</code>) if it is in the middle of a method? (<code>document.contactForm.</code><strong><code>fieldName</code></strong><code>.style.border="none !important";</code>)</p>
  
  <p>Here is a link to an illustration of my problem on <strong>jsfiddle</strong>: <a href="http://jsfiddle.net/sonbrL2r/" rel="nofollow">http://jsfiddle.net/sonbrL2r/</a></p>
  
  <p>The first function is called upon form submission. If it detects an empty form it puts a red border around the text field;</p>
  
  <p>The second function is then meant to remove said border upon focus of that text field. </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;form name="contactForm" onSubmit="return formValidate();"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;label&gt;Your Name:&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="realname" size="44" maxlength="60" onFocus="removeBorder(realname);"/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="submit" value="SEND" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var formValidate = function() {
      var formValid = true;
      var errorMsg = "Oops! Looks like you didn't complete the form properly: \n";
  
          if (document.contactForm.realname.value == "") {
              document.contactForm.realname.style.border="2px solid #cc3333";
              errorMsg+="The name field is empty.\n";
              var formValid = false;
  
      if(!formValid) {alert(errorMsg)};   
      return formValid;
  };
  
  var removeBorder = function(fieldName) {
      document.contactForm.fieldName.style.border="none !important";
  };
  </code></pre>