如何通过 CDN 使用 material 设计组件使错误文本出现在输入字段下方?
How to make error text appear underneath input field using material design components through CDN?
我正在使用 material 通过 CDN 设计来创建一个填充的输入字段,但是当用户没有正确输入例如电子邮件时,我无法在下面创建错误消息,我已经尝试了几种也可以通过 CDN 导入 jquery 的方法,但它无法正常工作。我试图查看 material 设计的 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--persistent 的 class,您已将其包含在内。这将使帮助文本永久可见,因此您不希望这样。
这是您应该拥有的块,而不是标签后的 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:如果您可以在您下次要遵循的示例中包含一个 link,那就太好了。
我正在使用 material 通过 CDN 设计来创建一个填充的输入字段,但是当用户没有正确输入例如电子邮件时,我无法在下面创建错误消息,我已经尝试了几种也可以通过 CDN 导入 jquery 的方法,但它无法正常工作。我试图查看 material 设计的 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--persistent 的 class,您已将其包含在内。这将使帮助文本永久可见,因此您不希望这样。
这是您应该拥有的块,而不是标签后的 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:如果您可以在您下次要遵循的示例中包含一个 link,那就太好了。