Question

在我的网站上，我无法发布链接，因为这是一个受管理员/版主保护的目录，我正在运行Google MDL，并且我遇到了表单问题。

一旦页面加载，每个输入和文本区域的底线变为红色，表示添加了类is-invalid，这是我在使用开发人员工具时看不到的。我确实在is-inavlid上看到div作为标记，但是代码没有将该类添加到div中，这意味着表单在页面加载时会自动失效。

自从将type=number添加到输入后出现此问题。

信息：以下代码不是整个页面，只是表单，但问题仍然存在（运行代码段）

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!--BEGINNING OF MY CODE, ABOVE IS MDL LOAD-->
<div class="mdl-card mdl-shadow--6dp" style="width:100%;">
  <div class="mdl-card__title">
    <h1 class="mdl-card__title-text">Add a post</h1>
  </div>
  <div class="mdl-card__supporting-text">

    <form id="newPost" action="#" method="POST">
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="width:100%;">
        <input required class="mdl-textfield__input" type="text" name="title" id="title-entry">
        <label class="mdl-textfield__label" for="title-entry">Title</label>
      </div>
      <br>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="width:100%;">
        <input required class="mdl-textfield__input" type="text" name="media" id="media-entry">
        <label class="mdl-textfield__label" for="media-entry">Media URL</label>
      </div>
      <br>
      <div class="mdl-textfield mdl-js-textfield" style="width:100%;">
        <textarea required class="mdl-textfield__input" type="text" rows="3" name="content" id="content-entry"></textarea>
        <label class="mdl-textfield__label" for="content-entry">Content</label>
      </div>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="width:100%;">
        <input required class="mdl-textfield__input" type="number" name="number" id="number-entry">
        <label class="mdl-textfield__label" for="number-entry">Post No.</label>
      </div>
      <div class="mdl-textfield mdl-js-textfield" style="width:100%;">
        <input required class="mdl-textfield__input" type="date" name="date" id="date-entry">
      </div>
  </div>
  <div class="mdl-card__actions" style="text-align:center;">
    <a href="#">
      <input value="submit" type="submit" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored"></input>
    </a>
  </div>
  </form>
</div>

Answer 1

我通过以下方式解决了这个问题：

我覆盖了MaterialTextfield.checkValidity方法
我只在第一次在mdl字段
如果字段有效，则删除类IS_INVALID
如果字段无效且字段长度大于0，则添加IS_INVALID类
如果字段无效且字段长度等于0（必填字段），则仅当第一次为该字段不是checkValidity时才添加IS_INVALID类。

这是代码：

MaterialTextfield.prototype.checkValidity = function () {
    var CLASS_VALIDITY_INIT = "validity-init";        
    if (this.input_ && this.input_.validity && this.input_.validity.valid) {
        this.element_.classList.remove(this.CssClasses_.IS_INVALID);
    } else {

        if (this.input_ && this.input_.value.length > 0) {
            this.element_.classList.add(this.CssClasses_.IS_INVALID);
        }
        else if(this.input_ && this.input_.value.length === 0)
        {
            if(this.input_.classList.contains(CLASS_VALIDITY_INIT))
            {
                this.element_.classList.add(this.CssClasses_.IS_INVALID);
            }
        }


    }

    if(this.input_.length && !this.input_.classList.contains(CLASS_VALIDITY_INIT))
    {
        this.input_.classList.add(CLASS_VALIDITY_INIT);
    }
};

Answer 2

如果您在该字段上也有必需属性，则问题https://github.com/google/material-design-lite/issues/1502会描述这种不良行为，但遗憾的是还没有修复。

似乎导致mdl在加载页面时运行验证，并且当输入字段为空时，它将被标记为无效。显然，只有在用户开始编辑表单后才会发生这种情况。

一种可能的快速和肮脏的解决方法描述为：

$(window).load(function () {
    $('input[data-required=true]').attr('required', true);
});

Answer 3

编辑：如果需要字段，则无效。这是因为如果需要输入，空白文本字段将无效。您可能必须手动手动删除is-invalid类，但这看起来有点hacky。

MDL有一些我发现隐藏的方法（同样，我不确定这个问题发布后是否存在）方法是：

element.MaterierialTextField.checkValidity()

如果你有mdl标签重叠文本，

也检查脏可能非常有用：

element.MaterierialTextField.checkDirty()

这是我使用checkValidity

创建的函数

function mdlCleanUp(className){
  var mdlInputs = document.querySelectorAll(className);
  for (var i = 0, l = mdlInputs.length; i < l; i++) {
    mdlInputs[i].MaterialTextfield.checkValidity();
  }
}

然后在页面加载后调用

mdlCleanUp("mdl-textfield")

如果您不想检查整个文档的有效性，也可以将自己的类添加到mdl div元素中。

MDL表单在加载

3 个答案: