Валидация формы html
Можно средствами 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">Узнать больше »</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>С версии 5, html поддерживает для input свойство pattern, которое с помощью регулярных выражений позволяет на уровне html осуществлять валидацию полей ввода, а так же определять стили валидных и невалидных введенных данных на css с помощью псевдоэлемента :valid. Например:
<input type="text" pattern="[\d]{1,}">
Этот код не позвонит предать обработчику по нажатию кнопки submit введенную в поле ввода информацию, если введено это менее одной цифры. А поддерживающий pattern браузер проиндицирует ошибку всплывающим сообщением и цветом окантовки input.
Советую изучить регулярные выражения, они имеют особенности для php/html и js. А так же обратить внимание на безопасность ваших полей ввода - злоумышленник скорее всего будет обращаться напрямую к вашему обрабочику, минуя валидацию на уровне html и js. Поэтому в обработчике все равно придется проводить повторную валидацию.
Используй 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 не смог найти...
- Почему SERVER_ADDR имеет не тот IP 47699 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30546 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23727 visits
- Как через css изменить цвет png изображения? 10373 visits
- Blob video url download 9981 visits
- Php curl запрос через прокси с авторизацией 9240 visits
- Работа с captcha vk api 8117 visits
© "hostciti.net" 27.1.2025 | 19:04