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

Question

I am using material design through CDN to create a filled input field, but I can't create an error message below when the user doesn't write correctly for example the email, I have tried several ways importing jquery also through CDN but it does not work properly.我正在通过 CDN 使用材料设计来创建一个填充的输入字段，但是当用户没有正确编写例如电子邮件时，我无法在下面创建错误消息，我尝试了几种方法也通过 CDN 导入 jquery，但确实如此不能正常工作。 I have tried to see the API of material design and tried to implement it but It did not work either.我曾尝试查看材料设计的 API 并尝试实现它，但它也不起作用。 Anyhelp would be really appreciated!任何帮助将非常感激！

Thanks谢谢

<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

Answer 1

First off, jQuery wasn't needed.首先，不需要 jQuery。 It didn't give any errors and it behaved the same, so I just removed it.它没有给出任何错误并且行为相同，所以我只是将其删除。

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

If you look at the section titled: Text field with helper text如果您查看标题为：带有辅助文本的文本字段的部分

Here you can seen the following example:在这里您可以看到以下示例：

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

If you look carefully at the after the label, you will see some differences.如果仔细查看标签之后，您会发现一些差异。

There is even more detailed information on how to use the helper text: https://github.com/material-components/material-components-web/tree/v7.0.0/packages/mdc-textfield/helper-text/关于如何使用辅助文本还有更详细的信息： https : //github.com/material-components/material-components-web/tree/v7.0.0/packages/mdc-textfield/helper-text/

In the API section there is a class called mdc-text-field-helper-text--persistent which you have included.在 API 部分，有一个名为 mdc-text-field-helper-text--persistent 的类，您已将其包含在内。 This will make the helper text permanently visible, so you don't want that.这将使辅助文本永久可见，因此您不希望这样。

Here is the block you should have instead of the p element after the label:这是您应该拥有的块，而不是标签后的 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: would be great if you could include a link to the example you were following next time. PS：如果您可以包含指向您下次关注的示例的链接，那就太好了。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-10-10 14:58:51

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-10-10 14:58:51

解决方案1
0 已采纳 2020-10-10 14:58:51