Проверка достоверности HTML5

124

Простейший способ выполнения проверки достоверности клиентской стороны предусматривает поручение этой работы браузеру, для чего применяются средства проверки достоверности, поддерживаемые элементом <input, которые появились в HTML5. В примере ниже приведены изменения, внесенные в элементы <input> внутри веб-формы, CreateProduct.aspx, которую мы создали в предыдущей статье:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CreateGame.aspx.cs" Inherits="ClientDev.CreateGame" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
     <style>
        th { text-align: left; }
        td[colspan="2"] { text-align: center; padding: 10px 0; }
        .error { color: red; }
    </style>
    <%: System.Web.Optimization.Scripts.Render("~/bundle/jquery") %>
    <script>
        $(document).ready(function () {
            $('button').click(function (e) {
                var input = $('#Name')[0];
                if (input.checkValidity() && !input.validity.customError) {
                    var length = input.value.length;
                    if (length < 5 || length > 20)
                        input.setCustomValidity("Имя должно содержать от 5 до 20 символов.");
                    else
                        input.setCustomValidity("");
                }
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ValidationSummary runat="server" CssClass="error" />
        <table>
            <tr>
                <td>Название:</td>
                <td><input id="Name" runat="server" required="required" /></td>
            </tr>
            <tr>
                <td>Категория:</td>
                <td><input id="Category" runat="server" required="required" /></td>
            </tr>
            <tr>
                <td>Цена:</td>
                <td><input id="Price" runat="server" type="number" min="1" max="10000" required="required" /></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="Добавить игру" runat="server"/></td>
            </tr>
            ...
        </table>
    </form>
</body>
</html>

Для достижения нужного эффекта мы применяем три разных вида проверки достоверности форм HTML. Первый вид проверки заключается в использовании атрибута required:

<input ... required="required" />

Атрибут required предотвращает отправку формы до тех пор, пока пользователь не предоставит значение. Если пользователь все-таки попытается отправить форму, браузер выделит поле и предупредит о возникшей проблеме. Атрибут required обеспечивает наличие значения, но не накладывает никаких ограничений на то, каким должно быть это значение. Об этом заботится второй вид проверки достоверности, который задается с помощью новых значений атрибута type, определенных в HTML5:

<input ... min="1" max="10000" />

К элементу Price применен атрибут required и вдобавок его атрибут type установлен в number, а это означает, что браузер не разрешит отправку формы до тех пор, пока не будет предоставлено числовое значение. С помощью атрибутов min и max можно указывать диапазон допустимых значений.

Последний вид применяемой проверки достоверности требует кода JavaScript, который определен в элементе <script>, добавленном к веб-форме. В API-интерфейсе HTML5 DOM определен ряд удобных свойств и функций для элементов <input>, которые позволяют выполнять специальную проверку достоверности с использованием JavaScript. Функция checkValidity() проверяет значение, введенное пользователем, свойство validity предоставляет способ проверки на предмет различных условий ошибок, а функция setCustomValidity() дает возможность устанавливать специальное условие ошибки, задавая сообщение об ошибке (которое очищается повторным вызовом этой функции с указанием пустой строки). Сочетание всего упомянутого с определенным кодом jQuery позволяет применять требование к длине строки в элементе <input> для свойства Name, когда пользователь пытается отправить форму.

Чтобы увидеть результат, запустите приложение, запросите веб-форму CreateGame.aspx и введите в полях формы недопустимые данные (или вообще ничего не вводите). После щелчка на кнопке "Создать" поля формы выделяются, и для любого элемента <input>, находящегося в фокусе, отображается сообщение с описанием проблемы:

Использование проверки достоверности форм HTML5

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

Хуже того, старые браузеры будут просто игнорировать такие атрибуты проверки и разрешать отправку формы, что приведет к запуску проверки достоверности серверной стороны. Это означает, что вы можете применять в своем проекте проверку достоверности форм HTML5, однако обнаружите, что многим пользователям она не доступна (хотя браузеры HTML5 становятся все более распространенными).

Существуют определенные отличия в том, как браузеры, поддерживающие HTML5, реализуют средства элементов <input>. Например, браузер IE 10 визуально не изменяет внешний вид элементов <input>, атрибут type которых установлен в number, но будет удалять любое значение, не являющееся допустимым. Браузер Google Chrome отображает окно числового счетчика, которое более удобно, но затрудняет применение к нему стилей CSS. Такое поведение меняется с каждым обновлением браузера по мере того, как реализация средств становится более совершенной и достигается общее согласие по поводу наилучшего подхода для каждого типа проверки. Но до тех пор, пока HTML5 не стабилизируется, мы не рекомендуем использовать упомянутые средства в качестве единственного решения для проверки достоверности клиентской стороны в реальных проектах.

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

Пройди тесты
Лучший чат для C# программистов