Блог

Главная - Вопросы по программированию - способ проверить валидность форм HTML5?

способ проверить валидность форм HTML5?

#javascript #forms #html #dom

#javascript #формы #HTML #dom

Вопрос:

Возможно ли проверить, является ли элемент ввода формы html5 допустимым на основе шаблона, который я установил для него? Я знаю, что такое псевдокласс.. но я надеюсь, что что-то вроде: document.getElementById('petitionName').valid может вернуть true или false ..

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

Ответ №1:

есть два способа проверить валидность.

  1. inputElement.checkValidity() возвращает true или false
  2. inputElement.validity возвращает объект состояния валидности. inputElement.validity.valid ВОЗВРАТ true/false

Вместо использования keyup вы также можете использовать событие ‘input’. Все браузеры, в которых реализован API проверки ограничений, также реализовали событие ввода.

Если вы используете вариант 1 выше, Opera обнаружит ошибку здесь и покажет подсказку о проверке. Итак, вы должны использовать 2.

Я создал библиотеку форм html5, которая реализует все неизвестные функции для недоступных браузеров устраняет проблемы в браузерах HTML5. Итак, все работает так, как определено в спецификации, но построено поверх jQuery. (http://afarkas.github.com/webshim/demos/index.html ).

Комментарии:

1. Хм, я просто хотел плагин checkValidity, который был бы обратно совместим. Кажется, в вашей библиотеке слишком много встроенных функций, а документы трудно читать.

2. Я думаю, что change событие лучше подходит для проверки валидности.

3. есть ли способ использовать флаги (например, i ) в шаблоне HTML?

4. Поддержка браузера checkValidity выглядит неплохо: developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement /…

Ответ №2:

Вы можете использовать pattern атрибут.

Он будет проверять это на стороне клиента, поэтому нет необходимости проверять это снова на стороне клиента.

Пример

jsFiddle.

Но убедитесь, что вы делаете это снова на стороне сервера.

Также обратите внимание, поскольку совместимость с браузерами сейчас довольно плохая, JavaScript является нормой для проверки на стороне клиента.

Комментарии:

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

2. да, я знаю 🙂 У меня уже есть такая же настройка, и я хочу избежать использования любого средства проверки формы jQuery. Я знаю, что могу установить шаблоны или типы, которые проверяются для меня. И я уже это сделал. Но я хочу вызывать функции, как только входной элемент становится валидным. Я прослушиваю события ‘onKeyUp’ для элементов, но нет способа проверить, действительно ли они действительны. У меня есть CSS, который сообщает о валидности элемента, но этого недостаточно.

3. @Henry Вы могли бы перебирать input элементы, извлекая их pattern атрибут и тестируя результирующее регулярное выражение.

4. да — это именно то, чего я хочу избежать 🙂 Я все же разобрался с этим: функция checkValid(){ document.getElementById(’email’).validity.validate; }; которая работает в Chrome и iOS 4.3 🙂 спасибо, Алекс!

5. @Henry Ах да, я видел это свойство там и собирался упомянуть о нем 🙂

Ответ №3:

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

 var Form = document.getElementById('FormID');
if (Form.checkValidity() == false) {
    var list = Form.querySelectorAll(':invalid');
    for (var item of list) {
        item.focus();
    }
}

Комментарии:

1. Это позволит сфокусироваться на последнем элементе. Я имею в виду, первую, затем 2-ю, затем N-ю, затем последнюю. Я думаю, вы правы, он установит его для первого элемента — даже сохранит фокус на первом элементе, если первый также является последним. Вы могли бы использовать querySelector , чтобы избежать всего этого.