jQuery-validate Example
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>
<form id="form" method="post" action="#">
<label for="date">Date</label>
<input type="text" name="date" id="date" data-max-date-adt="22.04.2017" data-min-date-adt="22.04.2005"/>
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<button type="submit">Submit</button>
</form>
CSS
body {
padding: 20px;
}
label {
display: block;
}
input.error {
border: 1px solid red;
}
label.error {
font-weight: normal;
color: red;
}
button {
display: block;
margin-top: 20px;
}
JavaScript
$.validator.methods.adt = function(value, element) {
var min = $(element).data('min-date-adt');
var max = $(element).data('max-date-adt');
var minDate = toDate(min);
var maxDate = toDate(max);
console.log(minDate);
console.log(maxDate);
var check = $(element).val();
console.log(check);
var checkDate = toDate(check);
console.log(checkDate);
function toDate(datestr) {
var from = datestr.split(".");
return new Date(from[2], from[1] - 1, from[0]);
}
var result = checkDate > minDate && checkDate < maxDate;
console.log(result);
return result;
};
$(document).ready(function () {
$("#form").validate({
rules: {
"date": {
required: true,
adt: true,
minlength: 5
},
"email": {
required: true,
email: true
}
},
messages: {
"date": {
required: "Please, enter a name",
adt: "invalid date range"
},
"email": {
required: "Please, enter an email",
email: "Email is invalid"
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});