Form Validation html

Question

Can html css tools be used so that only such data can be entered into the field form?

Date of birth (format in the form dd.mm.yyyy)
SNILS (xxx-xxx-xxx xx format, only numbers)
OMS policy (16 characters, only numbers)

The form itself is standard: an exception is connected to the bootstrap for the grid:

<!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>

I came here for a decision, I remember I saw something, but I don’t know how to find it.

Accepted Answer · 2016-08-17T22:10:59

Since version 5, html supports the property pattern for input, which using регулярных выражений allows validating input fields at the html level, as well as defining styles of valid and non- :valid css input data using the pseudo-element :valid . For example:

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

This code will not call the handler by pressing the submit button, the information entered in the input field, if this is entered is less than one digit. And the pattern supporting browser will indicate an error with a pop-up message and a border color input .

I advise you to study regular expressions, they have features for php / html and js. And also to pay attention to the security of your input fields - the attacker is likely to contact your processor directly, bypassing the html and js validation levels. Therefore, the handler will still have to re-validate.

Answer 2 · 2016-08-17T15:59:28

Use mask for input . Example :

 $(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>

To enter only numbers, use the attribute onkeypress='return event.charCode >= 48 && event.charCode <= 57' .

For the correct operation of the date entry field, use DateEntry , I can not add here, CDN could not find ...

@Other I wrote a general example of how this works, dear, oTHER.
@Nikita Smith One question, dear, if I ask the masks in this way, what values will the input have?
the user has entered 99999999 - the field displays 99/99/9999 - and what value does the field get 99999999?
@ stas0k no, you're wrong, the value is the same as you see)

Form Validation html

2 answers 2

More articles: