Проверка формы HTML5

Несколько месяцев назад Sandeep представил нам API ограничения HTML , демонстрируя, как мы можем использовать новые типы ввода и атрибуты HTML5 для проверки наших форм в браузере с минимальным использованием JavaScript. Сегодня я расскажу вам о том, как проверить простую форму бронирования с помощью Constraint API, и рассмотрим, как вы можете сделать так, чтобы ваши формы оставались доступными.

Напомним — или в случае, если вы еще не читали статью Сандипа — с рассветом HTML5, множество новых типов ввода и атрибутов было добавлено в теги <input> Чтобы начать использовать новые типы ввода и атрибуты, вам не нужно ничего делать, кроме как начать использовать новые типы ввода и атрибуты.

Строго говоря, вы должны убедиться, что используете HTML5 DOCTYPE, иначе вы столкнетесь с ошибками проверки HTML. Но самое замечательное в них то, что они все грациозно деградируют. Так что, если старый браузер не поддерживает их, тот факт, что они находятся в HTML, ничего не «сломает», они просто будут отображаться как <input type=”text”>

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

Давайте рассмотрим пример того, как мы можем проверить форму, используя только встроенную проверку браузера. Возьмите эту простую форму бронирования:

 <form action="" method="post">
    <fieldset>
        <legend>Booking Details</legend>
        <div>
            <label for="name">Name (required):</label>
            <input type="text" id="name" name="name" value="" aria-describedby="name-format">
            <span id="name-format" class="help">Format: firstname lastname</span>
        </div>
        <div>
            <label for="email">Email (required):</label>
            <input type="text" id="email" name="email" value="">
        </div>
        <div>
            <label>Website:</label>
            <input type="text" id="website" name="website" value="">
        </div>
        <div>
            <label for="numTickets"><abbr title="Number">No.</abbr> of Tickets (required):</label>
            <input type="text" id="numTickets" name="numTickets" value="">
        </div>
        <div class="submit">
            <input type="submit" value="Submit">
        </div>
    </fieldset>
</form>    - <label>

https://jsfiddle.net/ianoxley/aZ9r8/1/

Обратите внимание, что каждое поле ввода имеет связанный for Атрибут for для тега label совпадает с атрибутом id соответствующего входного тега. Это сохраняет нашу семантику HTML, а метки помогают придать смысл элементам управления вводом. Это также означает, что если щелкнуть метку, связанный тег ввода получает фокус.

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

Я также использую атрибут WAI ARIA aria-describedby

 <label for="name">Name (required):</label>
<input type="text" id="name" name="name" value="" aria-describedby="name-format">
 <span id="name-format" class="help">Format: firstname lastname</span>

Это показано, когда поле ввода, которое оно описывает, получает фокус, предоставляя контекстно-зависимую помощь:

 .help {
    display:none;
    font-size:90%;
}
input:focus + .help {
    display:inline-block;
}

Для проверки этой формы нам необходимо:

1. Убедитесь, что обязательные поля заполнены
2. Убедитесь, что то, что введено для «Имя», похоже на имя
3. Убедитесь, что адрес электронной почты выглядит как адрес электронной почты
4. Убедитесь, что если указан URL-адрес веб-сайта, он выглядит как URL
5. Убедитесь, что номер был введен в «Количество билетов»

Обязательные поля

Проверить обязательные поля так же просто, как добавить required<input> Например, имя теперь выглядит так:

 <div>
        <label for="name">Name:</label>
        <input id="name" name="name" value="" aria-describedby="name-format" required>
        <span id="name-format" class="help">Format: firstname lastname</span>
    </div>

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

 <input id="name" name="name" value="" aria-describedby="name-format" required aria-required=”true”/>

 <input id="name" name="name" value="" aria-describedby="name-format" required aria-required=”true” pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+">

 <input id="name" name="name" value="" aria-describedby="name-format" required aria-required=”true” pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+"  title="firstname lastname">

 <input type="email" id="email" name="email" required>
…
<input type="url" id="url" name="url">
…
<input type="number" id="numTickets" name="numTickets" required>

 <input type="number" min="1" max="4" id="numTickets" name="numTickets">

 input:required {
    background:hsl(180, 50%, 90%);
    border:1px solid #999;
}

 input:optional {
    background:hsl(300, 50%, 90%);
    border:1px dotted hsl(180, 50%, 90%);
}

 input:valid,
input:in-range {
    background:hsl(120, 50%, 90%);
    border-color:hsl(120, 50%, 50%);
}

input:invalid,
input:out-of-range {
    border-color:hsl(0, 50%, 50%);
    background:hsl(0, 50%, 90%);
}

 input:focus + .help,
input:invalid + .help {
    display:inline-block;
}

 <form action="" method="post">
    <fieldset>
        <legend>Booking Details</legend>
        <div>
            <label for="name">Name:</label>
            <input id="name" name="name" value="" required  pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" aria-required="true" aria-describedby="name-format">
            <span id="name-format" class="help">Format: firstname lastname</span>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" value="" required aria-required="true">
        </div>
        <div>
            <label for="website">Website:</label>
            <input type="url" id="website" name="website" value="">
        </div>
        <div>
            <label for="numTickets"><abbr title="Number">No.</abbr> of Tickets:</label>
            <input type="number" id="numTickets" name="numTickets" value="" required aria-required="true" min="1" max="4">
        </div>
        <div class="submit">
            <input type="submit" value="Submit">
        </div>
    </fieldset>
</form>

 <form novalidate>
    …
</form>

 // Without Moderizr
var inputElem = document.createElement('input');
if (!('required' in inputElem)) {
    // JavaScript form validation
  }

...

// With Modernizr
if (!Modernizr.input.required) {
    // JavaScript form validation
}