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. I have tried to see the API of material design and tried to implement it but It did not work either. 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
First off, jQuery wasn't needed. 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
If you look at the section titled: Text field with helper text
Here you can seen the following example:
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/
In the API section there is a class called mdc-text-field-helper-text--persistent which you have included. 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:
PS: would be great if you could include a link to the example you were following next time.