title: Why required attribute in Textarea is not working?
body: <p>Okay, So I've already checked other questions but no one has the answer to the question I am asking. Just to be clear.</p>
  
  <p>So, I am using <strong>Materializecss</strong> and <strong>JQuery</strong>. Here are the textarea fields I want to be required on condition!</p>
  
  <pre><code>&lt;div class="col s12 input-field" style="margin-bottom:17px;margin-left:-12px;"&gt;
      &lt;input type="checkbox" id="sslTypeToggle" name="sslType" /&gt;
      &lt;label for="sslTypeToggle"&gt;I already have SSL Certificate.&lt;/label&gt;
  &lt;/div&gt;
  &lt;div id="customSSL" style="display:none;"&gt;
      &lt;div class="col s12 input-field"&gt;
          &lt;textarea id="certificate" name="certificate" class="materialize-textarea"&gt;&lt;/textarea&gt;
          &lt;label for="certificate"&gt;Paste Your Certificate&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="col s12 input-field"&gt;
          &lt;textarea id="privateKey" name="privateKey" class="materialize-textarea"&gt;&lt;/textarea&gt;
          &lt;label for="privateKey"&gt;Paste Your Private Key&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="col s12 input-field"&gt;
          &lt;textarea id="chain" name="chain" class="materialize-textarea"&gt;&lt;/textarea&gt;
          &lt;label for="chain"&gt;Paste Your Chain File (CA Bundle)&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and Here is the Jquery I am using!</p>
  
  <pre><code>$('#sslTypeToggle').on('change',function()
  {
      if(this.checked)
      {
          $("#certificate").prop('required',true);
          $("#privateKey").prop('required',true);
          $("#chain").prop('required',true);
          $('#customSSL').fadeIn('fast');
      }
      else
      {
          $("#certificate").prop('required',false);
          $("#privateKey").prop('required',false);
          $("#chain").prop('required',false);
          $('#customSSL').fadeOut('fast');
      }
  });
  </code></pre>
  
  <p>I don't know what's wrong. When I check with Inspect element, I can see the <code>required</code> attribute in <code>&lt;textarea&gt;</code> but Still, I can submit the form without entering anything in the field! Don't know what's wrong!</p>
  
  <p><strong>UPDATE</strong>: None of the answers worked. Maybe it is because I am Jquery and submitting form with JQuery too! Now, I am using Server Side validation!</p>