<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="resources/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/style.css">
<script src="resources/js/jquery/jquery-3.3.1.js"></script>
<script src="resources/js/jquery/jquery.validate.js"></script>
<script src="resources/registration/js/bootstrap.min.js"></script>
<script src="resources/registration/script/auth.js"></script>
<script src="resources/registration/js/additional-methods.min.js"></script>
<script src="resources/js/jquery/get-locale-browser-plugin.js"></script>
<script src="resources/registration/script/script.js"></script>
</head>
<body>
<div class="success"><h2><a href="#">Аутентификация</a></h2></div>
<div class="errMessage"></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-4">
<h2>Валидация формы</h2>
<hr>
<form class="form myForm" id="myForm">
<div class="messageForCommonError js-form-message"></div>
<div class="form-group">
<label for="inputEmail">Введите email:</label>
<input type="email" class="form-control email" name="email" id="inputEmail"
placeholder="Введите email">
.....
<div class="form-group dateInput">
<label for="inputDate">Введите дату:</label>
<input type="date" class="form-control" name="date" id="inputDate" placeholder="Введите дату">
</div>
...
<button type="button" class="btn btn-primary">Отправить</button>
</form>
</div>
</div>
</div>
$(document).ready(function () {
var lang = $('body').getLocaleOfBrowserPlugin();
/*it is the selector for first field of enter password*/
var selectorPasswordFirst = "classPassword";
/*defines array of messages about mistake according to locale browser*/
var messageInfo = createArrMessages(lang);
validateForm(messageInfo, selectorPasswordFirst);
});
/*create an array of messages about mistake according to locale browser */
function createArrMessages(langLocaleBrowser) {
var messagesRu;
var messagesEn;
messagesRu = {
date: "Пожалуйста, введите корректную дату.",
mainMessageOfErr: "Исправьте пожайлуста все ошибки !"
};
messagesEn = {
date: "Please enter a valid date.",
mainMessageOfErr: "Please, correct all mistakes !"
};
if (langLocaleBrowser === 'ru') {
return messagesRu;
} else {
return messagesEn;
}
}
/* 5404 3600 8922 0783 */
function validateForm(messageInfo, selectorPasswordFirst) {
var selectorFormValidate = ".myForm";
var selectorForMainMessageErr = ".js-form-message";
/* this custom function to check enter letters only*/
$.validator.addMethod("lettersonlyRusEng", function (value, element) {
return this.optional(element) || /^[а-яА-ЯёЁa-zA-Z]+$/.test(value);
},
"Please don't insert numbers.");
$(selectorFormValidate).validate({
rules: {
email: {
required: true,
email: true,
minlength: 7,
maxlength: 15
},
name: {
required: true,
minlength: 3,
maxlength: 10,
lettersonlyRusEng: true
},
lastname: {
required: true,
minlength: 3,
maxlength: 10,
lettersonlyRusEng: true
},
login: {
required: true,
minlength: 3,
maxlength: 10
},
password: {
required: true,
minlength: 2,
maxlength: 8
},
passwordRepeat: {
required: true,
minlength: 2,
maxlength: 8,
equalTo: '.' + selectorPasswordFirst
},
date: {
date: true,
required: true
},
telephone: {
required: true,
digits: true
},
creditCardName: {
required: true,
creditcard: true
}
},
focusCleanup: true,
focusInvalid: false,
/* this option output main message about mistakes*/
invalidHandler: function () {
$(selectorForMainMessageErr).text(messageInfo.mainMessageOfErr)
},
/* this option is clearing from main message of mistakes*/
onkeyup: function () {
$(selectorForMainMessageErr).text("")
},
/* This is configuring custom messages about mistakes.
This option work if did not connect of localization package*/
messages: {
email: {
required: messageInfo.required,
email: messageInfo.email,
maxlength: messageInfo.maxlength,
minlength: messageInfo.minlength
},
name: {
required: messageInfo.required,
maxlength: messageInfo.maxlength,
minlength: messageInfo.minlength,
lettersonlyRusEng: messageInfo.lettersonlyRusEng
},
lastname: {
required: messageInfo.required,
maxlength: messageInfo.maxlength,
minlength: messageInfo.minlength,
lettersonlyRusEng: messageInfo.lettersonlyRusEng
},
password: {
required: messageInfo.required,
maxlength: messageInfo.maxlength,
minlength: messageInfo.minlength
},
passwordRepeat: {
required: messageInfo.required,
maxlength: messageInfo.maxlength,
minlength: messageInfo.minlength,
equalTo: messageInfo.equalTo
},
date: {
required: messageInfo.required,
date: messageInfo.date
},
telephone: {
required: messageInfo.required,
digits: messageInfo.digits
},
creditcardName: {
required: messageInfo.required,
creditcard: messageInfo.creditcard
}
}
});
}
css
/*стилизация поля ввода, при ошибке*/
.error {
border-color: #ef079b;
box-shadow: 0 0 3px #ff0000;
}
/*стилизация сообщения об ошибке*/
/*внешний контейнер для поля ввода*/
.form-group {
width: 30%;
/* Относительно позиционированный элемент сдвигается со своего обычного
места в разных направлениях относительно границ родительского
контейнера, а пространство, которое он занимал, не исчезает.
При этом такой элемент может перекрывать другое содержимое
на странице. */
position: relative;
}
label.error{
width: 100%;
display: block; /*Элемент генерирует структурный блок, как и тег <div>.*/
padding-left: 25px;
margin-left: 25px;
color: #f9066b;
margin-top: 0.5%;
font-style:italic;
font-weight:300;
padding: 0.3% 0.3% 0.3% 0.3%;
font-size: 12px;
border-radius: 4px; /*загругление углов контейнера для ошибок*/
box-shadow: 0 0 3px #1023a2; /*тень вокруг контейнера для ошибок*/
/* Абсолютно позиционированный элемент полностью удаляется из
потока документа и позиционируется относительно границ его
блока-контейнера (другого элемента или окна браузера).*/
position: absolute;
top: 40%;
left: 100%;
z-index: 1;
}
/*контейнер для общих ошибок*/
.messageForCommonError {
padding: 10px;
margin-bottom: 20px;
font-weight: bold;
background-color: #caf4fe;
color: #ff0000;
text-align: center;
font-size: 15px;
font-style: italic;
}
/* используем псевдокласс 'empty', если в контейнере пока
нет никаких данных (то есть данные еще не сгенерированы)*/
.messageForCommonError:empty{
display: none; /*Элемент не генерирует никакой контейнер, полностью удаляясь со страницы.*/
}
.valid{
box-shadow: 0 0 3px #37e309; /*тень вокруг контейнера для првоеренных данных*/
}
-label.error{
color: #f9066b;
margin-top: 0.5%;
font-style:italic;
font-weight:300;
padding: 0.3% 0.3% 0.3% 0.3%;
font-size: 12px;
border-radius: 4px; /*загругление углов контейнера для ошибок*/
box-shadow: 0 0 3px #1023a2; /*тень вокруг контейнера для ошибок*/
}
С случае с Chrome, выбранная дата поступает на сервер в формате
dd/MM/yyyy , а нужно
dd-MM-yyyy
как это исправить ?
<input type="date" ....
Здесь нельзя менять тип , иначе не будет работать jquery-validate для данного поля....
