如何通过CDN使用材料设计组件使错误文本显示在输入字段下方？

问题描述

我正在通过CDN使用材料设计来创建填充的输入字段，但是当用户未正确书写（例如电子邮件）时，我无法在下面创建错误消息，我尝试了几种通过CDN导入jquery的方法但它不能正常工作。我试图查看材料设计的API并尝试实现它，但是它也不起作用。任何帮助将不胜感激！

谢谢

<html>
  <head>
    <title>Parcel SandBox</title>
    <Meta name="viewport" content="width=device-width,initial-scale=1" />
    <Meta charset="UTF-8" />
    <link
      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>

  <body>
    <form>
      <label class="mdc-text-field mdc-text-field--filled">
        <span class="mdc-text-field__ripple"></span>
        <input
          class="mdc-text-field__input mdc-text-field-helper-text--validation-msg"
          type="email"
          aria-controls="validation-msg"
          required
        />
        <span class="mdc-floating-label" id="my-label-id">My Label</span>
        <span class="mdc-line-ripple"></span>
      </label>
      <p
        class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
        role="alert"
      >
        Enter Valid Email
      </p>
    </form>
    <script>
      mdc.textField.MDCTextField.attachTo(
        document.querySelector(".mdc-text-field")
      );
    </script>
    </body>
</html>```
    

https://codesandBox.io/s/admiring-elion-kojst?file=/index.html

解决方法

首先，不需要jQuery。它没有给出任何错误，并且行为相同，因此我将其删除。

我在这里找到了手册：https://material.io/develop/web/components/text-fields

如果您查看标题为：带有辅助文字的文本字段

在这里您可以看到以下示例：

<label class="mdc-text-field mdc-text-field--filled">
  <span class="mdc-text-field__ripple"></span>
  <input class="mdc-text-field__input" type="text"
         aria-labelledby="my-label-id"
         aria-controls="my-helper-id"
         aria-describedby="my-helper-id">
  <span class="mdc-floating-label" id="my-label-id">My Label</span>
  <span class="mdc-line-ripple"></span>
</label>
<div class="mdc-text-field-helper-line">
  <div class="mdc-text-field-helper-text" id="my-helper-id" aria-hidden="true">helper text</div>
</div>

如果仔细看标签后面的内容，将会发现一些差异。

有关如何使用帮助程序文本的信息甚至更详细： https://github.com/material-components/material-components-web/tree/v7.0.0/packages/mdc-textfield/helper-text/

“ API”部分中有一个名为mdc-text-field-helper-text的持久类。这将使助手文本永久可见，所以您不希望这样。

这是您应该拥有的块，而不是标签后的p元素：

 <div class="mdc-text-field-helper-line">
    <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
        Enter Valid Email
    </div>
 </div>

PS：如果您可以包含指向您下次关注的示例的链接，那就太好了。

material-design mdc-components

如何通过CDN使用材料设计组件使错误文本显示在输入字段下方？

问题描述

解决方法

相关问答