title: how to make textarea required
body: <p>Pretty self-explanatory, I have a textarea and it's set to required, but it only prompts user if you actually click in the text area, if you submit without clicking inside the text area it will not prompt the alert.</p>
  
  <p><a href="http://jsfiddle.net/jordmax12/BD3hG/2/" rel="nofollow">Fiddle</a></p>
  
  <pre><code>&lt;p class="textHeader"&gt;
      &lt;strong&gt;
          Which type of elements would you be in favor of for a future 
          pattern for interactive media to follow? 
      &lt;/strong&gt;
      &lt;textarea
          name="styled-textarea"
          id="styled" 
          onfocus="this.value=''; setbg('#e5fff3');" 
          oninvalid="invalidComment(this);" 
          onblur="setbg('white')" 
          placeholder="Max characters 140"
          maxlength="140" 
          required
      &gt; 
      &lt;/textarea&gt;
  &lt;/p&gt; 
  </code></pre>