Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ff23330

Browse files
roytutsroytuts
authored
Create multi-step-registration.html
1 parent 003fef8 commit ff23330

File tree

1 file changed

+253
-0
lines changed

1 file changed

+253
-0
lines changed

‎python-flask-mysql-jquery-ajax-multi-step-registration/templates/multi-step-registration.html

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
<html>
2+
<head>
3+
<title>Multi Step Registration</title>
4+
<style>
5+
body {
6+
font-family:tahoma;
7+
font-size:12px;
8+
}
9+
10+
#signup-step {
11+
margin:auto;
12+
padding:0;
13+
width:53%
14+
}
15+
16+
#signup-step li {
17+
list-style:none;
18+
float:left;
19+
padding:5px 10px;
20+
border-top:#004C9C 1px solid;
21+
border-left:#004C9C 1px solid;
22+
border-right:#004C9C 1px solid;
23+
border-radius:5px 5px 0 0;
24+
}
25+
26+
.active {
27+
color:#FFF;
28+
}
29+
30+
#signup-step li.active {
31+
background-color:#004C9C;
32+
}
33+
34+
#signup-form {
35+
clear:both;
36+
border:1px #004C9C solid;
37+
padding:20px;
38+
width:50%;
39+
margin:auto;
40+
}
41+
42+
.demoInputBox {
43+
padding: 10px;
44+
border: #CDCDCD 1px solid;
45+
border-radius: 4px;
46+
background-color: #FFF;
47+
width: 50%;
48+
}
49+
50+
.signup-error {
51+
color:#FF0000;
52+
padding-left:15px;
53+
}
54+
55+
.message {
56+
color: #00FF00;
57+
font-weight: bold;
58+
width: 100%;
59+
padding: 10;
60+
}
61+
62+
.btnAction {
63+
padding: 5px 10px;
64+
background-color: #F00;
65+
border: 0;
66+
color: #FFF;
67+
cursor: pointer;
68+
margin-top:15px;
69+
}
70+
71+
label {
72+
line-height:35px;
73+
}
74+
75+
</style>
76+
77+
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
78+
79+
<script>
80+
function validate() {
81+
var output = true;
82+
$(".signup-error").html('');
83+
84+
if ($("#personal-field").css('display') != 'none') {
85+
if (!($("#name").val())) {
86+
output = false;
87+
$("#name-error").html("Name required!");
88+
}
89+
90+
if (!($("#dob").val())) {
91+
output = false;
92+
$("#dob-error").html("Date of Birth required!");
93+
}
94+
}
95+
96+
if ($("#password-field").css('display') != 'none') {
97+
if (!($("#user-password").val())) {
98+
output = false;
99+
$("#password-error").html("Password required!");
100+
}
101+
102+
if (!($("#confirm-password").val())) {
103+
output = false;
104+
$("#confirm-password-error").html("Confirm password required!");
105+
}
106+
107+
if ($("#user-password").val() != $("#confirm-password").val()) {
108+
output = false;
109+
$("#confirm-password-error").html("Password not matched!");
110+
}
111+
}
112+
113+
if ($("#contact-field").css('display') != 'none') {
114+
if (!($("#phone").val())) {
115+
output = false;
116+
$("#phone-error").html("Phone required!");
117+
}
118+
119+
if (!($("#email").val())) {
120+
output = false;
121+
$("#email-error").html("Email required!");
122+
}
123+
124+
if (!$("#email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
125+
$("#email-error").html("Invalid Email!");
126+
output = false;
127+
}
128+
129+
if (!($("#address").val())) {
130+
output = false;
131+
$("#address-error").html("Address required!");
132+
}
133+
}
134+
135+
return output;
136+
}
137+
138+
$(document).ready(function () {
139+
$("#next").click(function () {
140+
var output = validate();
141+
if (output === true) {
142+
var current = $(".active");
143+
var next = $(".active").next("li");
144+
if (next.length > 0) {
145+
$("#" + current.attr("id") + "-field").hide();
146+
$("#" + next.attr("id") + "-field").show();
147+
$("#back").show();
148+
$("#finish").hide();
149+
$(".active").removeClass("active");
150+
next.addClass("active");
151+
if ($(".active").attr("id") == $("li").last().attr("id")) {
152+
$("#next").hide();
153+
$("#finish").show();
154+
}
155+
}
156+
}
157+
});
158+
159+
160+
$("#back").click(function () {
161+
var current = $(".active");
162+
var prev = $(".active").prev("li");
163+
if (prev.length > 0) {
164+
$("#" + current.attr("id") + "-field").hide();
165+
$("#" + prev.attr("id") + "-field").show();
166+
$("#next").show();
167+
$("#finish").hide();
168+
$(".active").removeClass("active");
169+
prev.addClass("active");
170+
if ($(".active").attr("id") == $("li").first().attr("id")) {
171+
$("#back").hide();
172+
}
173+
}
174+
});
175+
176+
$("input#finish").click(function (e) {
177+
var output = validate();
178+
var current = $(".active");
179+
180+
if (output === true) {
181+
return true;
182+
} else {
183+
//prevent refresh
184+
e.preventDefault();
185+
$("#" + current.attr("id") + "-field").show();
186+
$("#back").show();
187+
$("#finish").show();
188+
}
189+
});
190+
});
191+
</script>
192+
193+
</head>
194+
<body>
195+
<ul id="signup-step">
196+
<li id="personal" class="active">Personal Detail</li>
197+
<li id="password">Password</li>
198+
<li id="contact">Contact</li>
199+
</ul>
200+
201+
<div>
202+
{% with messages = get_flashed_messages() %}
203+
{% if messages %}
204+
<ul>
205+
{% for message in messages %}
206+
<li>{{ message }}</li>
207+
{% endfor %}
208+
</ul>
209+
{% endif %}
210+
{% endwith %}
211+
</div>
212+
213+
<div>
214+
<form name="frmRegistration" id="signup-form" method="post" action="/register">
215+
<div id="personal-field">
216+
<label>Name</label><span id="name-error" class="signup-error"></span>
217+
<div><input type="text" name="name" id="name" class="demoInputBox"/></div>
218+
<label>Date of Birth</label><span id="dob-error" class="signup-error"></span>
219+
<div><input type="text" name="dob" id="dob" class="demoInputBox"/></div>
220+
<label>Gender</label>
221+
<div>
222+
<select name="gender" id="gender" class="demoInputBox">
223+
<option value="male">Male</option>
224+
<option value="female">Female</option>
225+
</select>
226+
</div>
227+
</div>
228+
229+
<div id="password-field" style="display:none;">
230+
<label>Enter Password</label><span id="password-error" class="signup-error"></span>
231+
<div><input type="password" name="password" id="user-password" class="demoInputBox" /></div>
232+
<label>Re-enter Password</label><span id="confirm-password-error" class="signup-error"></span>
233+
<div><input type="password" name="confirm-password" id="confirm-password" class="demoInputBox" /></div>
234+
</div>
235+
236+
<div id="contact-field" style="display:none;">
237+
<label>Phone</label><span id="phone-error" class="signup-error"></span>
238+
<div><input type="text" name="phone" id="phone" class="demoInputBox" /></div>
239+
<label>Email</label><span id="email-error" class="signup-error"></span>
240+
<div><input type="text" name="email" id="email" class="demoInputBox" /></div>
241+
<label>Address</label><span id="address-error" class="signup-error"></span>
242+
<div><textarea name="address" id="address" class="demoInputBox" rows="5" cols="50"></textarea></div>
243+
</div>
244+
245+
<div>
246+
<input class="btnAction" type="button" name="back" id="back" value="Back" style="display:none;">
247+
<input class="btnAction" type="button" name="next" id="next" value="Next" >
248+
<input class="btnAction" type="submit" name="finish" id="finish" value="Finish" style="display:none;">
249+
</div>
250+
</form>
251+
</div>
252+
</body>
253+
</html>

0 commit comments

Comments
 (0)