如何在用戶點擊提交時驗證MDL表單？

我想知道MDL是否有一個內置的JS函數來確保所有的字段都被填充（因爲我需要一些字段是必需的，但是因爲我發現了困難的方式，我需要添加所需的選項到場的形式，否則裝後，我有一個紅色的領域，而不是一個空白的清新形式。如何在用戶點擊提交時驗證MDL表單？

如果表單驗證不內置MDL JS那麼什麼驗證腳本MDL行之有效？

HTML表單

 <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;「>請告訴我們你的寵物
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（我還沒有添加驗證方又

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鏈接https://codepen.io/russellharrower/pen/rzxLRj

來源

2017-08-30 RussellHarrower

MDL中唯一的文本字段驗證我所看到的是MDL-textfield__error和圖案（見下面的代碼）：

<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>

來源

2017-09-08 20:57:48 Lambert

如何在用戶點擊提交時驗證MDL表單？

回答

相關問題