Skip to content

Commit 21b8ba4

Browse files
author
Rafael J. Staib
committed
Add first version of advanced form demo
1 parent 1f6550e commit 21b8ba4

File tree

1 file changed

+211
-0
lines changed

1 file changed

+211
-0
lines changed

‎advanced-form.html

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>jQuery Steps - Basic Form Demo</title>
5+
6+
<meta charset="utf-8">
7+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
8+
<meta name="author" content="Rafael J. Staib">
9+
<meta name="description" content="A powerful jQuery wizard plugin that supports accessibility and HTML5.">
10+
<meta name="keywords" content="jQuery, plugin, UI, component, wizard, tabs, steps, HTML5, javascript, accessibility, form, validation">
11+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
12+
13+
<!-- Required for Open Graph -->
14+
<meta property="og:title" content="jQuery Steps, a powerful jQuery wizard plugin that supports accessibility and HTML5.">
15+
<meta property="og:site_name" content="jQuery Steps, a powerful jQuery wizard plugin that supports accessibility and HTML5.">
16+
<meta property="og:type" content="website">
17+
<meta property="og:url" content="http://rstaib.github.io/jquery-steps">
18+
19+
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Architects+Daughter">
20+
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
21+
<link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen">
22+
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
23+
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.steps.css">
24+
25+
<script src="javascripts/jquery-1.9.1.min.js"></script>
26+
<script src="javascripts/jquery.steps.min.js"></script>
27+
<script src="javascripts/jquery.validate-1.11.1.js"></script>
28+
<!--[if lt IE 9]>
29+
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
30+
<![endif]-->
31+
</head>
32+
<body>
33+
<header>
34+
<div class="inner">
35+
<h1>jquery-steps</h1>
36+
<h2>A powerful jQuery wizard plugin that supports accessibility and HTML5.</h2>
37+
<a href="https://github.com/rstaib/jquery-steps" class="button"><small>View project on</small>GitHub</a>
38+
<div class="share">
39+
<a href="https://twitter.com/share" class="twitter-share-button" data-via="RafaelStaib" data-hashtags="jquerysteps">Tweet</a>
40+
<iframe src="http://ghbtns.com/github-btn.html?user=rstaib&repo=jquery-steps&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
41+
</div>
42+
</div>
43+
</header>
44+
45+
<div id="content-wrapper">
46+
<div class="inner clearfix">
47+
<section id="main-content">
48+
<script>
49+
$(function ()
50+
{
51+
$("#form").steps({
52+
headerTag: "h4",
53+
bodyTag: "fieldset",
54+
transitionEffect: "slideLeft",
55+
onStepChanging: function (event, currentIndex, newIndex)
56+
{
57+
$("#form").validate().settings.ignore = ":disabled,:hidden";
58+
return $("#form").valid();
59+
},
60+
onFinishing: function (event, currentIndex)
61+
{
62+
$("#form").validate().settings.ignore = ":disabled";
63+
return $("#form").valid();
64+
},
65+
onFinished: function (event, currentIndex)
66+
{
67+
alert("Submitted!");
68+
}
69+
});
70+
71+
$("#form").validate({
72+
rules: {
73+
confirm: {
74+
equalTo: "#password"
75+
}
76+
}
77+
});
78+
});
79+
</script>
80+
81+
<h3>Advanced Form Example</h3>
82+
<form id="form" action="#">
83+
<h4>Account</h4>
84+
<fieldset>
85+
<legend>Account Information</legend>
86+
87+
<label for="userName">User name *</label><br>
88+
<input id="userName" name="userName" type="text" class="required"><br>
89+
<label for="password">Password *</label><br>
90+
<input id="password" name="password" type="text" class="required"><br>
91+
<label for="confirm">Confirm Password *</label><br>
92+
<input id="confirm" name="confirm" type="text" class="required"><br>
93+
<input id="specialRole" name="specialRole" type="checkbox"> <label for="specialRole">Special User Role (if activated you will enter the hint step after profile step)</label><br>
94+
<p>(*) Mandatory</p>
95+
</fieldset>
96+
97+
<h4>Profile</h4>
98+
<fieldset>
99+
<legend>Profile Information</legend>
100+
101+
<label for="name">First name *</label><br>
102+
<input id="name" name="name" type="text" class="required"><br>
103+
<label for="surname">Last name *</label><br>
104+
<input id="surname" name="surname" type="text" class="required"><br>
105+
<label for="email">Email *</label><br>
106+
<input id="email" name="email" type="text" class="required email"><br>
107+
<label for="address">Address</label><br>
108+
<input id="address" name="address" type="text"><br>
109+
<p>(*) Mandatory</p>
110+
</fieldset>
111+
112+
<h4>Hints</h4>
113+
<fieldset>
114+
<legend>Hints</legend>
115+
116+
<p>You are a special user because of your role! That's why you see this content.</p>
117+
118+
<input id="readHint" name="readHint" type="checkbox" class="required" disabled> <label for="readHint">I have read that and agree.</label>
119+
</fieldset>
120+
121+
<h4>Finish</h4>
122+
<fieldset>
123+
<legend>Terms and Conditions</legend>
124+
125+
<input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
126+
</fieldset>
127+
</form>
128+
129+
<h3>License</h3>
130+
<p>Copyright (c) 2013 Rafael J. Staib Licensed under the <a href="https://github.com/rstaib/jquery-steps/blob/master/LICENSE.txt">MIT license</a>.</p>
131+
</section>
132+
133+
<aside id="sidebar">
134+
<a href="https://github.com/rstaib/jquery-steps/zipball/master" class="button">
135+
<small>Download</small>
136+
.zip file
137+
</a>
138+
<a href="https://github.com/rstaib/jquery-steps/tarball/master" class="button">
139+
<small>Download</small>
140+
.tar.gz file
141+
</a>
142+
143+
<p class="repo-owner"><a href="https://github.com/rstaib/jquery-steps"></a>is maintained by <a href="https://github.com/rstaib">rstaib</a>.</p>
144+
145+
<p>This page was generated by <a href="pages.github.com">GitHub Pages</a> using the Architect theme by <a href="http://twitter.com/jasonlong">Jason Long</a>.</p>
146+
</aside>
147+
</div>
148+
</div>
149+
150+
<script>
151+
// GitHub Star Button
152+
!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');
153+
154+
// Google Analytics
155+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
156+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
157+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
158+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
159+
160+
ga('create', 'UA-40997516-1', 'rstaib.github.io');
161+
ga('send', 'pageview');
162+
163+
// Anchor Event Tracking
164+
$(function()
165+
{
166+
var filetypes = /\.(zip|exe|pdf|doc*|xls*|ppt*|mp3|js|md)$/i,
167+
baseHref = "";
168+
if ($("base").attr("href") != undefined)
169+
{
170+
baseHref = $("base").attr("href");
171+
}
172+
173+
$("a").each(function()
174+
{
175+
var href = $(this).attr("href");
176+
if (href && (href.match(/^https?\:/i)) && (!href.match(document.domain)))
177+
{
178+
$(this).click(function()
179+
{
180+
ga("send", "event", "External", "Click", href.replace(/^https?\:\/\//i, ""));
181+
if ($(this).attr("target") != null && $(this).attr("target").toLowerCase() !== "_blank")
182+
{
183+
setTimeout(function() { location.href = href; }, 200);
184+
return false;
185+
}
186+
});
187+
}
188+
else if (href && href.match(/^mailto\:/i))
189+
{
190+
$(this).click(function()
191+
{
192+
ga("send", "event", "Email", "Click", href.replace(/^mailto\:/i, ""));
193+
});
194+
}
195+
else if (href && href.match(filetypes))
196+
{
197+
$(this).click(function()
198+
{
199+
ga("send", "event", "Download", "Click", href);
200+
if ($(this).attr("target") != null && $(this).attr("target").toLowerCase() !== "_blank")
201+
{
202+
setTimeout(function() { location.href = baseHref + href; }, 200);
203+
return false;
204+
}
205+
});
206+
}
207+
});
208+
});
209+
</script>
210+
</body>
211+
</html>

0 commit comments

Comments
 (0)