-
Notifications
You must be signed in to change notification settings - Fork 0
/
validation.html
123 lines (105 loc) · 3.66 KB
/
validation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<title>Parsley Validation</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="parsley.min.js"></script>
<style class="example">
.form-section {
padding-left: 15px;
border-left: 2px solid #FF851B;
display: none;
}
.form-section.current {
display: inherit;
}
.btn-info, .btn-default {
margin-top: 10px;
}
</style>
</head>
<body>
<form id="form" class="demo-form" data-parsley-validate="">
<div class="form-section">
<label for="firstname">First Name:</label>
<input type="text" class="form-control" name="firstname" required="" data-parsley-required-message="Please fill now">
<label for="lastname">Last Name:</label>
<input type="text" class="form-control" name="lastname" required="">
</div>
<div class="form-section">
<label for="email">Email:</label>
<input type="email" class="form-control" name="email" required="" data-parsley-required-message="Please fill now" data-parsley-type-message="Please rigt email now" data-parsley-remote data-parsley-remote-validator='checkExistMail' data-parsley-remote-message="Email already exist">
</div>
<div class="form-section">
<label for="color">Favorite color:</label>
<input type="text" class="form-control" name="color" required="">
</div>
<div class="form-navigation">
<button type="button" class="previous btn btn-info pull-left">< Previous</button>
<button type="button" class="next btn btn-info pull-right">Next ></button>
<input type="submit" class="btn btn-default pull-right">
<span class="clearfix"></span>
</div>
</form>
<script type="text/javascript">
window.Parsley.addAsyncValidator('checkExistMail', function (xhr) {
var response=JSON.parse(xhr.responseText);
if(response.status!==0){
return true;
}
}, 'http://localhost/validation/checkMail.php');
$(function () {
var $sections = $('.form-section');
function navigateTo(index) {
// Mark the current section with the class 'current'
$sections
.removeClass('current')
.eq(index)
.addClass('current');
// Show only the navigation buttons that make sense for the current section:
$('.form-navigation .previous').toggle(index > 0);
var atTheEnd = index >= $sections.length - 1;
$('.form-navigation .next').toggle(!atTheEnd);
$('.form-navigation [type=submit]').toggle(atTheEnd);
}
function curIndex() {
// Return the current index by looking at which section has the class 'current'
return $sections.index($sections.filter('.current'));
}
// Previous button is easy, just go back
$('.form-navigation .previous').click(function() {
navigateTo(curIndex() - 1);
});
// Next button goes forward iff current block validates
$('.form-navigation .next').click(function() {
$('.demo-form').parsley().whenValidate({
group: 'block-' + curIndex()
}).done(function() {
navigateTo(curIndex() + 1);
});
});
// Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
$sections.each(function(index, section) {
$(section).find(':input').attr('data-parsley-group', 'block-' + index);
});
navigateTo(0); // Start at the beginning
$('#form').on('submit',function(evevt){
evevt.preventDefault();
if($('#form').parsley().isValid()){
$.ajax({
url:"http://localhost/validation/checkMail.php",
method:"POST",
data:$(this).serialize(),
beforeSend:function(){
// submit btn disable here OR loader show
},
success:function(data){
console.log(data);
}
})
}
});
});
</script>
</body>
</html>