title: how to validate MDL form when user clicks submit?
body: <p>I am wondering does MDL have an inbuilt JS function that will make sure all the fields are filled in (as i need a few fields to be required, however as I found out the hard way I needed to add the required option to the field after the form loaded otherwise I had a RED field instead of a blank clean fresh form.</p>
  
  <p>If form validation is not built into MDL JS then what validation script works well with MDL?</p>
  
  <p>html form</p>
  
  <p>
         
           </p>
  
  <pre><code>     &lt;h4 class="mdl-cell mdl-cell--12-col"&gt;Pet Details&lt;/h4&gt;
  
                  &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--6-col"&gt;
                              &lt;input class="mdl-textfield__input" id="petsname" type="text"&gt;
                              &lt;label class="mdl-textfield__label" for="petsname"&gt;Pets's Name&lt;/label&gt;
                          &lt;/div&gt;
       &lt;!--  END PETS NAME --&gt;
  
       &lt;!-- PETS DOB --&gt;
            &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--6-col"&gt;
                              &lt;input class="mdl-textfield__input" id="petsdob" type="text"&gt;
                              &lt;label class="mdl-textfield__label" for="petsdob"&gt;Pet's Date Of Birth&lt;/label&gt;
            &lt;/div&gt;
       &lt;!-- END PETS DOB --&gt;
  
       &lt;!-- PET SEX --&gt;
            &lt;div id="petgenderoptions" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--2-col getmdl-select getmdl-select__fix-height"&gt;
                               &lt;input class="mdl-textfield__input" id="petgender" name="petgender" value="" type="text" tabIndex="-1" placeholder="please select" data-required="true"/&gt;
                               &lt;label class="mdl-textfield__label" for="petgender"&gt;Gender&lt;/label&gt;
                            &lt;ul id="petgendermenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="petgender"&gt;     
                              &lt;li data-val="Male" class="mdl-menu__item"&gt;Male&lt;/li&gt;
                              &lt;li data-val="Female" class="mdl-menu__item"&gt;Female&lt;/li&gt;
                            &lt;/ul&gt;
                          &lt;/div&gt;
       &lt;!-- END PET SEX --&gt;
  
       &lt;!-- PET TYPE --&gt;
        &lt;div id="pettypeoptions" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--5-col getmdl-select getmdl-select__fix-height"&gt;
                               &lt;input class="mdl-textfield__input" id="pettype" name="pettype" value="Dog" type="text" tabIndex="-1"/&gt;
                               &lt;label class="mdl-textfield__label" for="pettype"&gt;Pet Type&lt;/label&gt;
                            &lt;ul id="pettypemenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="pettype"&gt;     
                              &lt;li data-val="Dog" class="mdl-menu__item"&gt;Dog&lt;/li&gt;
                              &lt;li data-val="Cat" class="mdl-menu__item"&gt;Cat&lt;/li&gt;
                            &lt;/ul&gt;
                          &lt;/div&gt;
       &lt;!-- END PET TYPE --&gt;
       &lt;!-- PET BREED --&gt;
            &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--5-col"&gt;
                              &lt;input class="mdl-textfield__input" id="petsbreed" name="petsbreed" type="text"&gt;
                              &lt;label class="mdl-textfield__label" for="petsbreed"&gt;Pet Breed&lt;/label&gt;
                          &lt;/div&gt;
       &lt;!-- END PETS BREED --&gt;
  
  
  
               &lt;h4 class="mdl-cell mdl-cell--12-col" style="font-weight:light;
  </code></pre>
  
  <p>font-family: Roboto;">Tell us about your pet<br>
                              
                                  account_circle
                              </p>
  
  <pre><code>                        &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--11-col"&gt;
                              &lt;input class="mdl-textfield__input" id="microchipno" type="text"&gt;
                              &lt;label class="mdl-textfield__label" for="microchipno"&gt;Microchip Number&lt;/label&gt;
                          &lt;/div&gt;
  
  
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
  
    &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>JS (I have not added the validation side yet</p>
  
  <pre><code>var newpetsid = 0;
  active = null;
  
  window.addEventListener('load', function () {
    getmdlSelect.init("#petgenderoptions");
    getmdlSelect.init("#pettypeoptions");
  
    $('input[data-required=true]').attr('required', true);
  });
  
  $(document).on ("click", "button.mdl-button", function () {
  
  
   /*if(active !== null){document.getElementById(active).classList.remove("active");
                      }*/
  
   active = this.id; 
   if(this.id === "addnew"){  
  
   dl= document.getElementById("newpetprofile");
  dl.insertAdjacentHTML('afterbegin','&lt;button id="'+ newpetsid +'" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored petprofilebuttons"&gt;&lt;i class="material-icons"&gt;account_circle&lt;/i&gt;&lt;/button&gt;');
     active = newpetsid;
     newpetsid++;
   }
  
  
  
  
    var morphFAB = $('#overlay');
    morphFAB.toggleClass('visible hidden');
    if (morphFAB.hasClass('visible')) {
      $('#form').addClass('animated slideInUp');
    }else {
      $('#form').removeClass('animated slideInUp');
    }
  
    componentHandler.upgradeDom();
  });
  $(document).ready(
  
      function iniciar(){
      $('.follow').on("click", function(){
          $('.follow').css('background-color','#34CF7A');
          $('.follow').html('&lt;div class="icon-ok"&gt;&lt;/div&gt;');
      }); 
  
    $('#petgendermenu').on("click", 'li', function(){  
   var s = $(this).attr('data-val');
      document.getElementById("petgender").value=$(this).attr('data-val');               });  
  
    $('#pettypemenu li').on("click", function(){
  
  document.getElementById("pettype").value=$(this).text();
    });
  
    }
  );
  </code></pre>
  
  <p>codepen link <a href="https://codepen.io/russellharrower/pen/rzxLRj" rel="nofollow noreferrer">https://codepen.io/russellharrower/pen/rzxLRj</a></p>