Валидация формы html

326

10 декабря 2016, 10:27

Можно средствами html css, сделать так чтобы в форму поля можно было ввести только такие данные?

Дата рождения (формат в форме дд.мм.гггг)
СНИЛС (формат xxx-xxx-xxx xx, только цифры)
Полис ОМС (16 символов, только цифры)

Сама форма стандартная: исключение подключен бутстрап для сетки:

<!DOCTYPE html> 
<html lang="ru"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Форма для отправки данных на сервер</title> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
    <div class="jumbotron"> 
        <div class="container"> 
            <h1>Форма</h1> 
            <p>Простая форма</p> 
            <p><a class="btn btn-primary btn-lg" href="https://www.google.ru" role="button">Узнать больше &raquo;</a></p> 
        </div> 
    </div> 
 
    <div class="col-md-6 col-md-offset-3"> 
        <form enctype="application/x-www-form-urlencoded;" id="contact-form" class="form-horizontal" role="form" method="post"> 
            <div class="form-group" id="name-field"> 
                <label for="form-name" class="col-lg-2 control-label"><?php  ?></label> 
                <div class="col-lg-10"> 
                    <input type="text" class="form-control" id="form-name" name="form-name" placeholder="<?php  ?>" required> 
                </div> 
            </div> 
            <div class="form-group" id="email-field"> 
                <label for="form-email" class="col-lg-2 control-label"><?php  ?></label> 
                <div class="col-lg-10"> 
                    <input type="email" class="form-control" id="form-email" name="form-email" placeholder="<?php  ?>" required> 
                </div> 
            </div> 
            <div class="form-group" id="subject-field"> 
                <label for="form-subject" class="col-lg-2 control-label"><?php  ?></label> 
                <div class="col-lg-10"> 
                    <input type="text" class="form-control" id="form-subject" name="form-subject" placeholder="<?php  ?>" required> 
                </div> 
            </div> 
            <div class="form-group" id="message-field"> 
                <label for="form-message" class="col-lg-2 control-label"><?php ?></label> 
                <div class="col-lg-10"> 
                    <textarea class="form-control" rows="6" id="form-message" name="form-message" placeholder="<?php ?>" required></textarea> 
                </div> 
            </div> 
            <div class="form-group"> 
                <div class="col-lg-offset-2 col-lg-10"> 
                    <button type="submit" class="btn btn-default"><?php ?></button> 
                </div> 
            </div> 
        </form> 
    </div> 
 
    </script> 
</body> 
</html>

Answer 1

С версии 5, html поддерживает для input свойство pattern, которое с помощью регулярных выражений позволяет на уровне html осуществлять валидацию полей ввода, а так же определять стили валидных и невалидных введенных данных на css с помощью псевдоэлемента :valid. Например:

<input type="text" pattern="[\d]{1,}">

Этот код не позвонит предать обработчику по нажатию кнопки submit введенную в поле ввода информацию, если введено это менее одной цифры. А поддерживающий pattern браузер проиндицирует ошибку всплывающим сообщением и цветом окантовки input.

Советую изучить регулярные выражения, они имеют особенности для php/html и js. А так же обратить внимание на безопасность ваших полей ввода - злоумышленник скорее всего будет обращаться напрямую к вашему обрабочику, минуя валидацию на уровне html и js. Поэтому в обработчике все равно придется проводить повторную валидацию.

Answer 2

Используй mask для input. Пример:

$(document).ready(function() { 
  $('#data').mask('99/99/9999'); 
  $('#snils').mask('9999-9999-9999-9999'); 
  $('#16numbers').mask('9999999999999999'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.min.js"></script> 
<form> 
  <input id="data" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' pattern="^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$" placeholder="01/02/2016" required> 
  <input id="snils" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}" placeholder="9999-9999-9999-9999" required> 
    <input id="16numbers" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' pattern="[0-9]{16}" placeholder="9999999999999999" required> 
  <input type="submit" value="submit"> 
</form>

Для ввода только цифр используй атрибут onkeypress='return event.charCode >= 48 && event.charCode <= 57'.

Для правильной работы поля ввода даты используй DateEntry, не могу дописать здесь, CDN не смог найти...

Создание сайта для строительной компании в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Уведомления в браузере ( типа вк или другое)

Делаю новостной сайтПри добавлении новости осуществляется уведомление всем пользователям о новой новости

241

HTML

Менять значения блока при нажатии на ссылку

ЗдравствуйтеЕсть ссылка

314

HTML

Глюк во втором списке при выборе первого

При выборе первого поля, меняется значения второгоНо при первом открытии страницы, во втором поле, должно быть по умолчанию только "Выберите...

209

HTML

Не могу запустить сайт Hello World на хостинге firebase

Делаю следующие действия 1Зарегистрировалась на сайте firebase (вошла со своего гугл аккаунта) и создала там проект 2

328