Все ли браузеры поддерживают метод проверки HTML5 checkValidity()?

Спецификация HTML5 определяет некоторые очень интересные компоненты проверки, включая pattern (для проверки на Regexp) и required (для маркировки поля по мере необходимости). Однако, насколько я могу судить, ни один браузер на самом деле не выполняет какую-либо проверку на основе этих атрибутов.

Я нашел сравнение

Ответ 1

В Google Chrome я протестировал следующее:

<!DOCTYPE html>
<html>
  <body>
    <style>
      .valid { color: #0d0; }
      .invalid { color: #d00; }
    </style>
    <div id="output"></div>
    <script>
      function check(input) {
        var out = document.getElementById('output');
        if (input.validity) {
          if (input.validity.valid === true) {
            out.innerHTML = "<span class='valid'>" + input.id +
                            " is valid</span>";
          } else {
            out.innerHTML = "<span class='invalid'>" + input.id +
                            " is not valid</span>";
          }
        }
        console.log(input.checkValidity());
      };
    </script>
    <form id="testform" onsubmit="return false;">
      <label>Required:
        <input oninput="check(this)" id="required_input" 
               required />
      </label><br>
      <label>Pattern ([0-9][A-Z]{3}):
        <input oninput="check(this)" id="pattern_input" 
               pattern="[0-9][A-Z]{3}"/>
      </label><br>
      <label>Min (4):
        <input oninput="check(this)" id="min_input" 
               type=number min=4 />
      </label><br>
    </form>
  </body>
</html>

Stangely, свойство <element>.validity.valid работает корректно, но вызов <element>.checkValidity() всегда возвращает true, поэтому он выглядит так, как будто он еще не реализован.

Ответ 2

Конечно. Опера и Хром. Но вы можете проверить себя:

function supportsValidity(){
  var i = document.createElement('input');
  return typeof i.validity === 'object'
}

Здесь ссылка на песочницу, где вы можете увидеть Opera и Chrome в действии: http://jsfiddle.net/vaZDn/light/

Ответ 3

checkValidity() является suppost для работы либо с формой в целом, либо с отдельным входом.

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

взятый из списка Apart - http://www.alistapart.com/articles/forward-thinking-form-validation/

" form. checkValidity() Возвращает true, если все элементы управления формы действительны; в противном случае возвращает false. " http://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#constraint-validation

"valid = element. checkValidity() Возвращает true, если значение элемента не имеет проблем с действительностью; false в противном случае. Запускает недопустимое событие в элементе в последнем случае. " http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#client-side-form-validation

W3C - рабочий проект.

Ответ 4

Согласно Погрузитесь в HTML5:

Когда пользователь Opera пытается отправить форму с полем, Opera автоматически предлагает RFC-совместимую проверку подлинности электронной почты, даже если сценарий отключен. Opera также предлагает проверку веб-адресов, введенных в поля, и номеров в полях. При проверке чисел даже учитываются атрибуты min и max, поэтому Opera не позволит вам отправить форму, если вы вводите слишком большой номер.

(цитируемый параграф относится к последнему в статье.)

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

Ответ 5

Opera 10 имеет некоторую проверку HTML5 http://dev.opera.com/articles/view/improve-your-forms-using-html5/. Но, я не думаю, что у него есть checkValidation().

Ответ 6

Если вы имеете в виду checkValidity(), то да, Opera поддерживает его.

Disclosurey thang: Я работаю в Opera.