javascript - MDL 表单在加载时无效

Question

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

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

此问题是在将 type=number 添加到输入后出现的。

INFO: The code below is not the whole page, just the form, but the issue is still here (run snippet)

<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

我是这样解决的:

1. 我覆盖了 MaterialTextfield.checkValidity 方法
2. 我仅在第一次在 mdl 字段上运行 checkValidity 时添加了一些自定义类
3. 如果字段有效，则删除类 IS_INVALID
4. 如果字段无效并且字段的长度大于 0 我添加 IS_INVALID 类
5. 如果字段无效并且字段的长度等于 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);
    }
};