Js setcustomvalidity не работает

Как показать сообщение/подсказку setCustomValidity без события отправки

Я использую базовую проверку форм для проверки правильности формата электронной почты, затем данные отправляются Ajax, где он проверяет, используется ли адрес электронной почты, и пользователь выбирает страну/состояние или оставил значения по умолчанию в полях выбора.

но для проверки формы HTML5 необходимо отправить событие, нажав кнопку Отправить, если он проходит эту базовую проверку формы выполняется операция Ajax, но затем, когда приходят результаты, я хотел бы использовать те же подсказки браузера для согласованность интерфейса (и мне нравится, как они выглядят).

Итак, есть способ заставить их появиться, я не смог найти, есть ли какое-то специальное событие для них или что-то вроде увольнения события отправки, но остановить его сразу. Сейчас поле получает только красный край, и при наведении мыши на него появляется сообщение об ошибке, а всплывающая подсказка снова нажимает кнопку «Отправить».

также для браузеров, у которых нет собственных подсказок(в моем случае Safari), я использую Webshims Lib и он действует точно так же, как в Chrome и Firefox.

8 ответов

Я думал .checkValidity() будет делать трюк, но он не запускает пользовательский интерфейс.

Я не знаю, реализуют ли его еще какие-либо браузеры:/

в основном, вы находите кнопку отправки и нажимаете на нее:

вы также можете изменить сообщение проверки после проверки, если адрес электронной почты используется или нет, а затем принудительной проверки формы, как указано выше:

это на самом деле очень просто-добавьте скрытый элемент ввода в форму:

вызов myInputField.setCustomValidity(message) на элементе ввода, который вы хотите создать пользовательскую подсказку, затем вызовите form.click();

процесс проверки формы запускается и отображает всплывающее окно сообщения над этим элементом, но форма не будет отправляться из-за скрытого элемента, поэтому вам не нужно будет перехватывать и отменять событие отправки.

когда вы закончите и действительно готовы идти, установите значение на скрытом элемент и форма будут представлены нормально.

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

полифилл для HTMLFormElement.reportValidity() .
Протестировано с IE11 и Edge. Но при запуске в песочнице StackOverflow ниже с IE11 сообщения проверки не отображаются.

в приведенной выше ссылке он использовал тип «input» — это номер, а oninput он назвал функцией проверки. Дайте мне знать, это то, что вы ищете.

как говорят большинство людей, вы должны использовать input.setCustomValidity(«message») .

проблема здесь в том, что вы не можете проверить эту проверку в submit событие, так как вам нужно сделать вызов ajax, а затем установить setCustomValidity асинхронно.

так в основном вы должны использовать change событие поля ввода и вызов ajax при каждом изменении. Или удалите кнопку submit и используйте click событие обычной кнопки, проверьте уникальную электронную почту в вызове ajax, а затем вызовите submit через Яваскрипт.

см. пример последнего варианта с помощью jQuery:

вы можете использовать setCustomValidity with для элемента, если условие false (вы можете сделать это внутри любого обработчика событий, такого как нажатие клавиши или щелчок ). Если ввод недопустим, отправьте. Это вызовет всплывающую подсказку сообщения браузера.

вот хороший пример этот пользователь проверяет / дает обратную связь по вводу формы.

Источник

Javascript setCustomValidity не работает в Chrome версии 65

Если вы хотите установить правильность с помощью функции setCustomValidity, как показано ниже, в chrome сообщение не установлено.

Как вы можете видеть, запускаете ли вы этот jsfiddle в Firefox и Chrome, вы можете видеть, что на chrome поле не имеет подтверждения.

Чтобы увидеть, что что-то происходит, перейдите в firefox, откройте jsfiddle и введите что-то. После того, как вы внесете что-то, нажмите «снаружи» и заметите, что добавлена красная рамка и отображается «ошибка».

Есть ли способ обхода Chrome?

Изменить: я зарегистрировал ошибку на хром. Пожалуйста, не стесняйтесь следовать этой теме.

Это похоже на ошибку. Я попробовал запустить пример, приведенный в спецификации, в скрипте JS здесь. Опять же, он работает с Firefox, но не с Chrome.

Обходным решением может быть использование атрибута pattern на входе и предоставление регулярного выражения для проверки ввода.

Я буду использовать пример, указанный в спецификации для этого. Вы можете установить шаблон регулярного выражения в атрибуте pattern и сообщение об ошибке в атрибуте title:

При этом вы можете использовать псевдоселектор :invalid применять красную рамку (или что-либо еще) к вводу:

Примечание. Очевидным недостатком такого подхода является то, что вы больше не можете использовать Javascript для проверки — и вы не сможете проверить значения комбинации полей.

Источник

javascript setCustomValidity не работает

Я новичок в Javascript, я хочу проверить, совпадают ли пароли, набранные два раза, с помощью Javascript. Но похоже это не работает:

3 ответа

таким образом, без части oninput=setCustomValidity(») , независимо от ввода.

Почему setCustomValidity() не работает в React? Я что-то упустил? С ванилью HTML и JS работает отлично. Или есть другой способ легко сделать что-то похожее на setCustomValidity ? Реагировать код: class Form extends React.Component < formVal(e) < e.target.setCustomValidity(Test_1); >formVal2() <.

Используйте document.getElementById() и используйте правильный идентификатор :

я отредактировал ваш код

Имя идентификатора, которое вы используете для поиска элемента, написано с ошибкой. Вам нужно указать правильный ID, чтобы получить элемент.

Вы забыли использовать объект document и напрямую пытаетесь получить доступ к getElementById.

Похожие вопросы:

У меня есть MVC4 view с Razor view engine в ASP.Net. Я пытаюсь проверить что-то пользовательское для текстовых полей 2 паролей, но когда я пытаюсь изменить сообщение проверки в функции ‘check(this)’.

Как я могу обратиться к полю ввода, чтобы установить setCustomValidity? Это не работает: в JS fiddle $(‘#numberinput’).val().setCustomValidity(‘The two email addresses must match.’);

Я пытаюсь проверить, вводит ли пользователь один и тот же пароль дважды. Однако после срабатывания .setCustomValidity он не будет сброшен на valid, если введен допустимый ввод и нажата кнопка.

Источник

Формы в HTML5: JavaScript и API для принудительной валидации форм

Содержание цикла статей «Формы в HTML 5»:

Часть 1 Формы в HTML5: Разметка;
Часть 2 Формы в HTML5: CSS;
Часть 3 Формы в HTML5: JavaScript и API для принудительной валидации форм.

В последней из трех статей на тему форм в HTML5 мы обсудим интеграцию JavaScript и constraint validation api . Если вы еще не готовы к этой теме, то вам стоит прочесть статьи Формы в HTML5: Разметка и Формы в HTML5: CSS чтобы вспомнить основы.

HTML5 позволяет нам применить валидацию форм на стороне клиента без использования JavaScript . Тем не менее, при использовании сложных форм ввода, нам понадобится усовершенствовать встроенную валидацию по следующим причинам:

• не все браузеры поддерживают абсолютно все типы полей ввода и селекторов CSS ;
• сообщения об ошибках используют общий текст (« пожалуйста, заполните это поле ») и их сложно типизировать;
• селекторы :invalid и :required применяются при загрузке страницы до того, как пользователь начнет взаимодействовать с формой.

Используя JavaScript и Constraint Validation API , мы сможем расширить наши возможности. Имейте в виду, что код получится не сильно прозрачным, если мы будем учитывать большое число браузеров и типов полей ввода.

Перехватываем данные из формы

Первая часть валидации, до HTML5 , присоединяет к форме обработчик submit , который будет проверять поля, отображать ошибки и предотвращать событие подтверждения.

На уровне HTML5 браузер сначала выполнит свою собственную проверку — событие submit не произойдет, пока форма не станет действительна.

Затем, если вы захотите исполнить что-то более сложное, к примеру, отобразить свои сообщения об ошибках, сравнить или заполнить поля автоматически, вам придется выключить встроенную валидацию установив свойство noValidate в значение true :

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

Свойство поля .willValidate

Каждое поле формы имеет свойство .willValidate . Оно возвращает следующие значения:

• true когда браузер для проверки будет использовать встроенную валидацию;
• false когда браузер не будет проверять поле;
• undefined когда браузер не поддерживает встроенную валидацию форм HTML5 , к примеру в IE8 .

Так как выше мы выключили встроенную валидацию, каждое поле вернет значение false .

Создадим собственный обработчик validateForm , который будет проверять, включена ли проверка браузеров у каждого поля:

Операция повторяется на всех полях elements формы и проверяет, являются ли элементы полями ввода, а не кнопками или группой полей. Обратите особое внимание на следующую строку:

Оба значения false и undefined — значения ложные, потому вы не сможете их проверить просто с помощью field.willValidate! И еще мы знаем о том, что код из первого блока будет иметь значение, только когда работает встроенная валидация. Однако…

Поддерживает ли браузер тип полей ввода?

Если вы помните, в первой части говорилось о том, что фолбэк в случае неподдерживаемых типов полей ввода — поле text . К примеру:

не имеет встроенной поддержки в Firefox 29 или IE11 . Эти браузеры (фактически) отобразят следующий код:

Но оба браузера поддерживают встроенную валидацию для типа поля text и потому field.willValidate не вернет значение undefined !

Поэтому сначала мы должны убедиться в том, что атрибуты type соответствуют свойствам объекта .type — и если это не так, мы должны реализовать проверку для фолбэка, к примеру, такую:

Метод .checkValidity()

В случае, когда встроенная валидация возможна, для проверки полей может быть использован метод .checkValidity() . Он вернет значение true , если проблем не обнаружит, или false , в остальных случаях.

Похожий метод .reportValidity() , который возвращает текущее состояние поля без его повторной проверки. Но он не поддерживается всеми браузерами, потому не столь полезен, как предыдущий.

Оба метода делают следующее:

• возвращают свойство объектов .validity , которое поможет детально рассмотреть ошибки;
• вызывают событие invalid при ошибке валидации. Это можно использовать для отображения ошибок, смены цвета полей и так далее. Обратите внимание, что нет соответствующего события valid , поэтому не забудьте сбросить стили ошибок и сообщений, при необходимости.

Объект Field .validity

Объект .validity имеет следующие свойства:

• . valid – возвращает true , если поле без ошибок и false в противном случае;
• .valueMissing – возвращает true , если значение в поле отсутствует, но оно требуется;
• .typeMismatch – возвращает true , если значение не соответствует синтаксису, к примеру, не корректно введен адрес электронной почты;
• .patternMismatch – возвращает true, если значение не соответствует выражению в атрибуте pattern ;
• .tooLong – возвращает true , если значение превышает допустимую длину maxlength ;.
• .tooShort – возвращает true , если значение меньше допустимого минимума minlength ;.
• .rangeUnderFlow – возвращает true , если значение меньше допустимого min ;
• .rangeOverflow – возвращает true , если значение больше допустимого max ;
• .stepMismatch – возвращает true , если значение введено с недопустимым шагом step ;
• .badInput – возвращает true , если запись не может быть преобразована в значение;
• .customError – возвращает true , если поле имеет набор ошибок пользователя.

Не все эти свойства поддерживаются всеми браузерами, потому сильно не увлекайтесь. В большинстве случае достаточно возвращаемых значений от .valid или .checkValidity() для отображения сообщений об ошибках.

Поддержка объекта .validity устаревшими браузерами

Эмулировать объект .validity в устаревших браузерах можно вручную, к примеру:

Этим методом .validity.valid может быть протестирован в любом браузере.

Метод.setCustomValidity()

Методу .setCustomValidity() можно передать:

• пустую строку. Это подразумевает, что поле ввода содержит корректные данные, потому и .checkValidity() и .validity.valid вернет значение true ;
• строку, содержащую сообщение об ошибке, которое будет показано во всплывающем сообщении (если используется).

Сообщение пометит поле как поле с ошибочными данными и потому .checkValidity() и .validity.valid возвратят значение false и произойдет событие invalid .

Обратите внимание, что вы также можете проверить текущее сообщение, используя свойство поля .validationMessage .

Подведем итоги

Теперь, у нас есть простая, кроссбраузерная система проверки формы:

Методу LegacyValidation преднамеренно оставили самое простое; он проверяет регулярные выражения required, minlength, maxlength и pattern , и вам нужно добавить свой код для проверок email , URL , дат, чисел, диапазонов.

Это приводит к вопросу: если вы пишете код валидации для устаревших браузеров, зачем обращаться за помощью к встроенным API браузера? Отличный вопрос! Код, показанный выше, написан для поддержки валидации форм всеми браузерами, начиная с IE6 и выше. Это ведь не всегда нужно…

• Вы можете не использовать код JavaScript для проверки простых форм. Пользователи устаревших браузеров в случае фолбэка попадут на валидацию со стороны сервера. И она должна быть всегда предусмотрена;
• Если вам потребуется использовать более сложные формы, но нужно поддерживать только новейшие браузеры ( Internet Explorer 10 + ), вы можете удалить весь код проверки для устаревших браузеров. Дополнительно вам может потребоваться проверка полей дат, которые в настоящее время не поддерживаются в Firefox и IE ;
• Даже если вам требуется код для проверки таких полей, как email, numbers и т.п. в IE9 и более ранних версиях, старайтесь не усложнять его и убирайте, как только он перестанет быть необходим. Сейчас требуется немного грязный код, но ситуация со временем улучшится.

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

Источник