Wie validiere ich das MDL-Formular, wenn der Benutzer auf "Senden" klickt?

Question

Ich frage mich, tut MDL hat eine eingebaute JS-Funktion, die sicher, dass alle Felder ausgefüllt machen wird (wie ich ein paar Felder müssen erforderlich sein, aber als ich auf die harte Art und Weise herausgefunden, ich brauchte die gewünschte Option des hinzufügen Feld, nachdem das Formular sonst geladen hatte ich einen roten Bereich statt einer leeren sauberen frischen Form.

Wenn Formularvalidierung nicht in MDL JS gebaut wird dann welche Validierungsskript funktioniert gut mit MDL?

hTML-Formular

 <h4 class="mdl-cell mdl-cell--12-col">Pet Details</h4> 

       <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--6-col"> 
          <input class="mdl-textfield__input" id="petsname" type="text"> 
          <label class="mdl-textfield__label" for="petsname">Pets's Name</label> 
         </div> 
    <!-- END PETS NAME --> 

    <!-- PETS DOB --> 
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--6-col"> 
          <input class="mdl-textfield__input" id="petsdob" type="text"> 
          <label class="mdl-textfield__label" for="petsdob">Pet's Date Of Birth</label> 
      </div> 
    <!-- END PETS DOB --> 

    <!-- PET SEX --> 
      <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"> 
          <input class="mdl-textfield__input" id="petgender" name="petgender" value="" type="text" tabIndex="-1" placeholder="please select" data-required="true"/> 
          <label class="mdl-textfield__label" for="petgender">Gender</label> 
          <ul id="petgendermenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="petgender">  
          <li data-val="Male" class="mdl-menu__item">Male</li> 
          <li data-val="Female" class="mdl-menu__item">Female</li> 
          </ul> 
         </div> 
    <!-- END PET SEX --> 

    <!-- PET TYPE --> 
     <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"> 
          <input class="mdl-textfield__input" id="pettype" name="pettype" value="Dog" type="text" tabIndex="-1"/> 
          <label class="mdl-textfield__label" for="pettype">Pet Type</label> 
          <ul id="pettypemenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="pettype">  
          <li data-val="Dog" class="mdl-menu__item">Dog</li> 
          <li data-val="Cat" class="mdl-menu__item">Cat</li> 
          </ul> 
         </div> 
    <!-- END PET TYPE --> 
    <!-- PET BREED --> 
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--5-col"> 
          <input class="mdl-textfield__input" id="petsbreed" name="petsbreed" type="text"> 
          <label class="mdl-textfield__label" for="petsbreed">Pet Breed</label> 
         </div> 
    <!-- END PETS BREED --> 



      <h4 class="mdl-cell mdl-cell--12-col" style="font-weight:light; 

font-family: Roboto; "> Erzählen Sie uns von Ihrem Haustier
account_circle

     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--11-col"> 
          <input class="mdl-textfield__input" id="microchipno" type="text"> 
          <label class="mdl-textfield__label" for="microchipno">Microchip Number</label> 
         </div> 


    <button type="submit">Submit</button> 

    </div> 
    </form> 

JS (Ich habe nicht die Validierung Seite noch

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','<button id="'+ newpetsid +'" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored petprofilebuttons"><i class="material-icons">account_circle</i></button>'); 
    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('<div class="icon-ok"></div>'); 
    }); 

    $('#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(); 
    }); 

    } 
); 

codepen Link https://codepen.io/russellharrower/pen/rzxLRj

hinzugefügt

Answer 1

Die einzige Textfeldvalidierung in MDL dass ich gesehen habe, ist mdl-textfield__error und Muster (siehe Code unten):

<div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 

<input id={this.id} pattern="validation_pattern_here" className="mdl-textfield__input" /> 
<label htmlFor={this.id} className="mdl-textfield__label">label_here</label> 
<span className="mdl-textfield__error">{this.errMsg}</span> 

</div>