Блог

Главная - Вопросы по программированию - Как сделать так, чтобы текст ошибки отображался под полем ввода с использованием компонентов material design через CDN?

Как сделать так, чтобы текст ошибки отображался под полем ввода с использованием компонентов material design через CDN?

#material-design #mdc-components

#material-design #mdc-components

Вопрос:

Я использую material design через CDN для создания заполненного поля ввода, но я не могу создать сообщение об ошибке ниже, когда пользователь неправильно пишет, например, электронное письмо, я пробовал несколько способов импорта jquery также через CDN, но он не работает должным образом. Я попытался просмотреть API material design и попытался его реализовать, но это тоже не сработало. Любая помощь была бы очень признательна!

Спасибо

 <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

Ответ №1:

Во-первых, 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, который вы включили. Это сделает вспомогательный текст постоянно видимым, поэтому вы этого не хотите.

Вот блок, который вы должны иметь вместо элемента 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: было бы здорово, если бы вы могли включить ссылку на пример, который вы использовали в следующий раз.