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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
|
<!DOCTYPE html>
<html>
<head>
<title>JQuery-validation demo | Semantic UI</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.1.4/semantic.min.css" />
<script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../../dist/jquery.validate.js"></script>
<style type="text/css">
.row {
padding-bottom: 0px !important;
}
</style>
</head>
<body>
<div class="ui grid sem">
<div class="four wide column"></div>
<div class="eight wide column">
<div class="ui info message" style="top: 15px;">
<div class="header">
This demo shows how to integrate JQuery-validation and the Semantic UI framework.
</div>
<ul class="list">
<li><a href="https://semantic-ui.com/">Semantic UI home project</a></li>
</ul>
</div>
<div class="ui segments" style="top: 20px; margin-bottom: 20px">
<div class="ui segment">
<h4 class="ui header">JQuery-validation demo - Semantic-UI Form</h4>
</div>
<div class="ui secondary segment">
<form id="signupForm" class="ui grid form" style="padding: 10px">
<div class="row field">
<label class="six wide column" for="firstname">First name</label>
<div class="eight wide column">
<div class="ui input">
<input id="firstname" name="firstname" type="text" placeholder="First name" />
</div>
</div>
</div>
<div class="row field">
<label class="six wide column" for="lastname">Last name</label>
<div class="eight wide column">
<div class="ui input">
<input id="lastname" name="lastname" type="text" placeholder="Last name" />
</div>
</div>
</div>
<div class="row field">
<label class="six wide column" for="username">Username</label>
<div class="eight wide column">
<div class="ui input">
<input id="username" name="username" type="text" placeholder="Username" />
</div>
</div>
</div>
<div class="row field">
<label class="six wide column" for="email">Email</label>
<div class="eight wide column">
<div class="ui input">
<input id="email" name="email" type="text" placeholder="Email" />
</div>
</div>
</div>
<div class="row field">
<label class="six wide column" for="password">Password</label>
<div class="eight wide column">
<div class="ui input">
<input id="password" name="password" type="password" placeholder="Password" />
</div>
</div>
</div>
<div class="row field">
<label class="six wide column" for="confirm_password">Confirm password</label>
<div class="eight wide column">
<div class="ui input">
<input id="confirm_password" name="confirm_password" type="password" placeholder="Confirm password" />
</div>
</div>
</div>
<div class="row field">
<label class="six wide column"></label>
<div class="eight wide column">
<div class="ui checkbox">
<input name="agree" type="checkbox" /> <label>Please agree to our policy</label>
</div>
</div>
</div>
<div class="row">
<label class="six wide column"></label>
<div class="eight wide column">
<button type="submit" class="ui primary button">Sign up</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="four wide column"></div>
</div>
<script type="text/javascript">
$.validator.setDefaults( {
submitHandler: function () {
alert( "submitted!" );
}
} );
$( document ).ready( function () {
$( "#signupForm" ).validate( {
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
errorPlacement: function ( error, element ) {
error.addClass( "ui red pointing label transition" );
error.insertAfter( element.parent() );
},
highlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".row" ).addClass( errorClass );
},
unhighlight: function (element, errorClass, validClass) {
$( element ).parents( ".row" ).removeClass( errorClass );
}
} );
} );
</script>
</body>
</html>
|
