Кажется получилось сделать валидацию к постраничной форме. Только вот у меня проблема с датой. Никак не получается составить регулярное выражение такого формата дд.мм.гггг. Как сделать проверку на вводимую дату?
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</script>
<style type="text/css">
#step2,#step3,#step4,#step5{
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script>
$.validator.addMethod("minlenghtname", function (value, element) {
return /^[a-zа-я]+$/i.test(value);
}," не соответствует формату");
$.validator.addMethod("requiredname", function (value, element) {
return value.length > 2;
}," Заполните это поле!!!");
$.validator.addMethod("requirednum", function (value, element) {
return /^\d+$/i.test(value);
}," только числа");
$.validator.addMethod("requiredemail", function (value, element) {
return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
}," Неправильный email");
$.validator.addMethod("checkMask", function(value, element) {
return /\+\d{1}\(\d{3}\)\d{3}-\d{4}/g.test(value);
},"Не верный формат телефона (+7(999)999-9999)");
$.validator.addMethod("checkData", function(value, element) {
return value.match(/^\d\d?\.\d\d?\.\d\d\d\d$/);
},"Please enter a date in the format dd.mm.yyyy.");
$(function () {
$("#Phone").mask("+7(999)999-9999");
$("#date").mask("99.99.9999",{placeholder:"dd.mm.yyyy"});
var v = $("#commentForm").validate({
rules: {
fname: {
requiredname: true,
minlenghtname: true
},
lname: {
requiredname: true,
minlenghtname: true
},
num1:{
requirednum:true
},
num2: {
requirednum:true
},
city: {
minlenghtname: true
},
country:{
minlenghtname: true
},
email:{
requiredemail: true
},
Phone:{
checkMask: true
},
date:{
checkData: true
}
},
submitHandler: function() {
alert("Submitted, thanks!");
}
})
$(".next1").click(function() {
if (v.form()) {
$("#step2").show();
$("#step1").hide();
$("#progressText").html("Шаг 2 из 4");
}
});
$(".next2").click(function() {
if (v.form()) {
$("#step3").show();
$("#step2").hide();
$("#progressText").html("Шаг 3 из 4");
}
});
$(".next3").click(function() {
if (v.form()) {
$("#step4").show();
$("#step3").hide();
$("#progressText").html("Шаг 4 из 4");
}
});
});
</script>
</head>
<body>
<div id="progressText">Шаг 1 из 4</div>
<form class="cmxform" id="commentForm" method="get" action="">
<ul id="stepForm">
<li id="step1">
<p><label>Имя:</label><input class="left" id="fname" name="fname"></p>
<p><label>Фамилия:</label><input class="left" id="lname" name="lname"></p>
<p class="buttonWrapper">
<input name="formNext1" type="button" class="next1 nextbutton" value="Next" alt="Next" title="Next">
</p>
</li>
<li id="step2">
<p><label>Номер 1:</label><input class="left" id="num1" name="num1" maxlength="11"></p>
<p><label>Номер 2:</label><input class="left" id="num2" name="num2" maxlength="16" ></p>
<p class="buttonWrapper">
<input name="formNext1" type="button" class="next2 nextbutton" value="Next" alt="Next" title="Next">
</p>
</li>
<li id="step3">
<p><label>Город:</label><input class="left" id="city" name="city"></p>
<p><label>Страна:</label><input class="left" id="country" name="country"></p>
<input name="formNext1" type="button" class="next3 nextbutton" value="Next" alt="Next" title="Next">
</li>
<li id="step4">
<p><label>Email адрес:</label><input name="email" id="email" class="email" title="Неправильный email"></p>
<p><label>Номер телефона:</label><input name="Phone" id="Phone" class="phone" maxlength="254" title="Введите телефон"></p>
<p><label>Дата:</label>
<input type="text" name="date" id="date" class="date" title="Введите дату"></p>
<input type="submit" class="submitbutton" value="Submit">
</li>
</ul>
</form>
</center>
</body>
</html>
|
