title: add/remove required attribute dynamically
body: <p>I want to add/remove the required attribute of an input element. But somehow it doesn't work.</p>
  
  <p>If offender Plate# text field is empty, Describe vehicle text field should be required.</p>
  
  <p>Offender Plate #: <code>&lt;input type="text" id="plate_num_id" name="plate_num" onblur="checkForRequired()"&gt;&lt;br&gt;</code></p>
  
  <p>Describe Vehicle: <code>&lt;textarea id="vehicle_desc_id" name="vehicle_desc"&gt;&lt;/textarea&gt;&lt;br&gt;</code></p>
  
  <p>Then here is my function.</p>
  
  <pre><code>function checkForRequired() {
  
      var plateLength = document.getElementById("plate_num_id").value.length;
  
      if (plateLength &lt; 1) {
  
          $("#vehicle_desc_id").add('required');
      } else {
  
          $("#vehicle_desc_id").removeAttr('required');
      }
  }
  </code></pre>
  
  <p>I have also tried other methods:</p>
  
  <pre><code>document.getElementById("vehicle_desc_id").removeAttribute("requried");
  
  document.getElementById("vehicle_desc_id ").required = true/false;
  
  document.getElementById("vehicle_desc_id ").setAttribute("required ", "");
  </code></pre>
  
  <p>None seems to be working...</p>