Пользовательский интерфейс материала - репликация «обязательного» сообщения об ошибке в текстовом поле - PullRequest
Новая
       10

Пользовательский интерфейс материала - репликация «обязательного» сообщения об ошибке в текстовом поле

0 голосов
/ 29 августа 2018

У меня есть простой компонент TextField из пользовательского интерфейса материала в React (обратите внимание на «требуется») 

<TextField
    label="Last name"
    name="lastName"
    required
    value={this.state.lastName}
    onChange={this.handleChange}
/>

Мне нравится функциональность и внешний вид "требуемого" свойства. Когда он активирован, это выглядит так:

required field

К сожалению, это свойство доступно только для их компонента TextField, но не для компонентов RadioGroup или Select. Если я хотя бы смог воспроизвести внешний вид (и, возможно, тот факт, что он прокручивает страницу до места ввода), я могу применить его ко всем своим входам для согласованного интерфейса.

Кто-нибудь знает, откуда они берутся? Похоже, что это может быть из другой упаковки. Буду признателен за любую помощь в поиске.

Ответы [ 3 ]

0 голосов
/ 29 августа 2018

На самом деле это свойство ввода из vanilla html. Текстовое поле состоит из более мелких компонентов, и вход является одним из компонентов, которые они используют. Обязательное свойство вызовет появление диалогового окна. 

<html>
    <body>
        <form>
              Username: <input type="text" name="username" required>
              <input type="submit">
        </form>
    </body>
</html>

Этот фрагмент также выдаст то же сообщение.

0 голосов
/ 14 ноября 2018

На самом деле довольно легко изменить стили ошибок, которые отображаются в разных браузерах при проверке формы. Вот ваш друг Ограничительный API .

Существует событие invalid, которое будет запущено перед отправкой формы, которое проверяет, удовлетворяют или нет элементы, имеющие атрибут required, свои ограничения.

Обычно я использую обработчик событий onInvalid и передаю обратный вызов, где вы можете получить много информации о проверке.

Например, в event.target.validationMessage вы увидите «Пожалуйста, заполните это поле» или event.target.validity.valid сообщит вам, является ли элемент действительным или нет. Имейте в виду, что вы должны preventDefault event.

e.preventDefault(); setInvalid( e.target.validity.valid ); setMessage( e.target.validationMessage );

Вот как я стилизовал собственные ошибки HTML, используя компонент <SnackbarContent /> из material-ui.

enter image description here

Также просто отметим, что в CSS есть пара псевдоэлементов, которые помогут вам стилизовать ввод. :invalid и :valid, но это не имеет ничего общего с самим сообщением.

Поскольку это несоответствие стилей действительно беспокоило меня некоторое время назад, я создал npm плагин, который решает эту проблему для вас, pretty-form-error , он работает с React и, по крайней мере, Angular 1.xx

0 голосов
/ 29 августа 2018

Если вы ссылаетесь на «Пожалуйста, заполните это поле», похоже, что это может быть функция, относящаяся к конкретному браузеру, а не функция «Материал» ... Проверяли ли вы другие браузеры, чтобы убедиться, что это поведение воспроизводимо?

...