Skip to content

Commit 2e52ea4

Browse files
ArkniArkni
committed
Demos: Added a new demo using Semantic UI
1 parent 6936d3c commit 2e52ea4

File tree

1 file changed

+176
-0
lines changed

1 file changed

+176
-0
lines changed

‎demo/semantic-ui/index.html‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>JQuery-validation demo | Semantic UI</title>
5+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.1.4/semantic.min.css" />
6+
<script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
7+
<script type="text/javascript" src="../../dist/jquery.validate.js"></script>
8+
<style type="text/css">
9+
.row {
10+
padding-bottom: 0px !important;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<div class="ui grid sem">
16+
<div class="four wide column"></div>
17+
18+
<div class="eight wide column">
19+
<div class="ui info message" style="top: 15px;">
20+
<div class="header">
21+
This demo shows how to integrate JQuery-validation and the Semantic UI framework.
22+
</div>
23+
<ul class="list">
24+
<li><a href="http://semantic-ui.com/">Semantic UI home project</a></li>
25+
</ul>
26+
</div>
27+
28+
<div class="ui segments" style="top: 20px; margin-bottom: 20px">
29+
<div class="ui segment">
30+
<h4 class="ui header">JQuery-validation demo - Semantic-UI Form</h4>
31+
</div>
32+
33+
<div class="ui secondary segment">
34+
<form id="signupForm" class="ui grid form" style="padding: 10px">
35+
<div class="row field">
36+
<label class="six wide column" for="firstname">First name</label>
37+
<div class="eight wide column">
38+
<div class="ui input">
39+
<input id="firstname" name="firstname" type="text" placeholder="First name" />
40+
</div>
41+
</div>
42+
</div>
43+
44+
<div class="row field">
45+
<label class="six wide column" for="lastname">Last name</label>
46+
<div class="eight wide column">
47+
<div class="ui input">
48+
<input id="lastname" name="lastname" type="text" placeholder="Last name" />
49+
</div>
50+
</div>
51+
</div>
52+
53+
<div class="row field">
54+
<label class="six wide column" for="username">Username</label>
55+
<div class="eight wide column">
56+
<div class="ui input">
57+
<input id="username" name="username" type="text" placeholder="Username" />
58+
</div>
59+
</div>
60+
</div>
61+
62+
<div class="row field">
63+
<label class="six wide column" for="email">Email</label>
64+
<div class="eight wide column">
65+
<div class="ui input">
66+
<input id="email" name="email" type="text" placeholder="Email" />
67+
</div>
68+
</div>
69+
</div>
70+
71+
<div class="row field">
72+
<label class="six wide column" for="password">Password</label>
73+
<div class="eight wide column">
74+
<div class="ui input">
75+
<input id="password" name="password" type="password" placeholder="Password" />
76+
</div>
77+
</div>
78+
</div>
79+
80+
<div class="row field">
81+
<label class="six wide column" for="confirm_password">Confirm password</label>
82+
<div class="eight wide column">
83+
<div class="ui input">
84+
<input id="confirm_password" name="confirm_password" type="password" placeholder="Confirm password" />
85+
</div>
86+
</div>
87+
</div>
88+
89+
<div class="row field">
90+
<label class="six wide column"></label>
91+
<div class="eight wide column">
92+
<div class="ui checkbox">
93+
<input name="agree" type="checkbox" /> <label>Please agree to our policy</label>
94+
</div>
95+
</div>
96+
</div>
97+
98+
<div class="row">
99+
<label class="six wide column"></label>
100+
<div class="eight wide column">
101+
<button type="submit" class="ui primary button">Sign up</button>
102+
</div>
103+
</div>
104+
</form>
105+
</div>
106+
107+
</div>
108+
</div>
109+
110+
<div class="four wide column"></div>
111+
</div>
112+
<script type="text/javascript">
113+
$.validator.setDefaults( {
114+
submitHandler: function () {
115+
alert( "submitted!" );
116+
}
117+
} );
118+
119+
$( document ).ready( function () {
120+
$( "#signupForm" ).validate( {
121+
rules: {
122+
firstname: "required",
123+
lastname: "required",
124+
username: {
125+
required: true,
126+
minlength: 2
127+
},
128+
password: {
129+
required: true,
130+
minlength: 5
131+
},
132+
confirm_password: {
133+
required: true,
134+
minlength: 5,
135+
equalTo: "#password"
136+
},
137+
email: {
138+
required: true,
139+
email: true
140+
},
141+
agree: "required"
142+
},
143+
messages: {
144+
firstname: "Please enter your firstname",
145+
lastname: "Please enter your lastname",
146+
username: {
147+
required: "Please enter a username",
148+
minlength: "Your username must consist of at least 2 characters"
149+
},
150+
password: {
151+
required: "Please provide a password",
152+
minlength: "Your password must be at least 5 characters long"
153+
},
154+
confirm_password: {
155+
required: "Please provide a password",
156+
minlength: "Your password must be at least 5 characters long",
157+
equalTo: "Please enter the same password as above"
158+
},
159+
email: "Please enter a valid email address",
160+
agree: "Please accept our policy"
161+
},
162+
errorPlacement: function ( error, element ) {
163+
error.addClass( "ui red pointing label transition" );
164+
error.insertAfter( element.parent() );
165+
},
166+
highlight: function ( element, errorClass, validClass ) {
167+
$( element ).parents( ".row" ).addClass( errorClass );
168+
},
169+
unhighlight: function (element, errorClass, validClass) {
170+
$( element ).parents( ".row" ).removeClass( errorClass );
171+
}
172+
} );
173+
} );
174+
</script>
175+
</body>
176+
</html>

0 commit comments

Comments
 (0)