-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (113 loc) · 4.29 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Registration Page</title>
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Registration Page">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<!-- CSS -->
<!-- Page Designed with LESS, using Compiled CSS for production -->
<!--<link rel="stylesheet/less" type="text/css" href="css/style.less">-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600">
<!-- HTML5 Shiv & Respond.js -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- All Other Javascript In Footer-->
</head>
<body>
<header>
<img class="logo" src="images/logo.png" alt="Pley">
</header>
<section class="main">
<div class="col-2-3">
<div class="box">
<h1>Register</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod leo sit amet mi consectetur, ac facilisis eros molestie. Duis elementum elit ut purus accumsan vehicula.</p>
<form method="post" id="registration_form">
<label for="first_name">Name</label>
<input type="text" name="first_name" id="first_name" value="" class="half" placeholder="First">
<input type="text" name="last_name" id="last_name" value="" class="half last" placeholder="Last">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" placeholder="[email protected]">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" placeholder="More than 6 characters">
<input type="submit" name="submit" class="submit" value="Sign Up!">
<a href="javascript:;" class="cancel">Cancel</a>
</form>
</div><!-- .box -->
</div><!-- col-2-3 -->
<div class="col-1-3">
<div class="box">
<h2>A Second Column</h2>
<p>Could go here. This column drops below the main one for smaller screens. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod leo sit amet mi consectetur, ac facilisis eros molestie. Duis elementum elit ut purus accumsan vehicula.</p>
</div><!-- box -->
</div><!-- col-1-3 -->
</section><!-- .main -->
<footer>
<p>Copyright 2014</p>
</footer>
<!-- Javascript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<!--<script src="js/less.js"></script>-->
<script src="js/placeholders.min.js"></script>
<!-- Page-Specific Script -->
<script>
$(document).ready(function() {
// Validate Form with jQuery Validation Plugin.
$("#registration_form").validate({
errorElement: "span",
rules: {
first_name: "required",
last_name: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
}
},
groups: {
full_name: "first_name last_name"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "first_name" || element.attr("name") == "last_name" ) {
error.insertAfter("#last_name");
} else {
error.insertAfter(element);
}
},
messages: {
first_name: "Please enter your First and Last Name",
last_name: "Please enter your First and Last Name",
email: {
required: "Please enter your Email Address",
email: "Please enter a Valid Email Address"
},
password: {
required: "Please enter a Password",
minlength: "Your password must be at least 6 characters"
}
},
submitHandler: function(form) {
// Submit form, get Thank You Page
$(".main").load("thanks.html");
}
});
// Cancel Button clears form fields.
$(".cancel").click(function(e) {
e.preventDefault();
$(this).closest("form").find("input[type=text], input[type=password]").val("").removeClass("error");
$("span.error").hide();
});
});
</script>
</body>
</html>