title: How to change the CSS style on required form inputs based on their values
body: <p>I would like to know how to write the javascript to alter the style of form elements which are required; and change them if they have values in them.</p>
  
  <p>What I want to do is have a colored border around the required text fields when they are blank, and remove the border style when they have values.</p>
  
  <p>what I've thought of doing is to write a single javascript function which checks if the value is empty and set the appropriate style:</p>
  
  <pre><code>function requiredElement(id) {
    var Input = document.getElementById(id);
    if(Input.value==null) {
      Input.style.border = '2px solid #FF0000';
    }
  }
  </code></pre>
  
  <p>But what I'm stuck with is changing the style as user enters/removes characters in these required fields, and calling the function for the fields.</p>
  
  <p>I have a simple html form, each input has a unique ID.</p>