forked from stevenmills/bootstrapvalidator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
group.html
144 lines (136 loc) · 5.51 KB
/
group.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator demo</title>
<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
<script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="page-header">
<h2>group option</h2>
</div>
<form id="form" method="post" class="form-horizontal" action="target.php">
<div class="form-group">
<div class="group">
<label class="col-sm-2 control-label">First name</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="firstName" />
</div>
</div>
<div class="group">
<label class="col-sm-2 control-label">Last name</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="lastName" data-bv-group=".group" />
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Username</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email address</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
//group: '.form-group',
fields: {
firstName: {
group: '.group',
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
lastName: {
// The "group" option can be set via HTML attribute
// <input type="text" class="form-control" name="lastName" data-bv-group=".group" />
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
},
different: {
field: 'password',
message: 'The username and password cannot be the same as each other'
}
}
},
email: {
validators: {
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
}
}
});
});
</script>
</body>
</html>