Question

我想知道MDL是否有一个内置的JS函数，可以确保填写所有字段（因为我需要一些字段需要，但是当我发现我需要添加所需选项的艰难方法时加载表单后的字段，否则我有一个RED字段而不是空白的清新表单。

如果表单验证没有内置到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;＆＃34;＆gt;告诉我们您的宠物 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 link https://codepen.io/russellharrower/pen/rzxLRj

Answer 1

我见过的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>

如何在用户点击提交时验证MDL表单？

1 个答案: