-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
executable file
·205 lines (152 loc) · 6.96 KB
/
contact.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
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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Astronomy Ireland | Contact</title>
<link href="css/style_Contact.css" rel="stylesheet">
<link href="css/style_General.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fascinate&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
</style>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function validateForm(){
var name_val = document.getElementById("name").value;
var age_val = document.getElementById("age").value;//REMEMBER .VALUE!!!
var email_val = document.getElementById("email").value;
localStorage.setItem("name", name_val);
localStorage.setItem("email", email_val);
if (validate_req() == true && ageTest(age_val) == true && nameLength(name_val) == true && validateEmail(email_val) == true && emailVerification() == true) {
return true;
}
else return false;
}
function validate_req(){
var name_val = document.getElementById("name").value;
if (name_val == null || name_val == ""){
alert("Please enter a name");
return false;
}
var age_val = document.getElementById("age").value;
if (age_val == null || age_val == ""){
alert("Please enter your age");
return false;
}
var email_val = document.getElementById("email").value;
if (email_val == null || email_val == ""){
alert("Please enter your email address");
return false;
}
var emailVer_val = document.getElementById("emailVer").value;
if (emailVer_val == null || emailVer_val == ""){
alert("Please retype your email address");
return false;
}
var message_val = document.getElementById("message").value;
if (message_val == null || message_val == ""){
alert("No message entered");
return false;
}
else return true;
}
function nameLength(name){
if (name.length > 20){
alert("Name must be max 20 characters");
return false;
}
else return true;
}
function validateEmail(email){
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (emailPattern.test(email) == false){
alert("Email is invalid");
return false;
}
else return true;
}
function ageTest(numericValue){
var numberPattern = /^[0-9]+$/;
if (numberPattern.test(numericValue)==false){
alert ("Age incorrect format");
return false;
}
if (numericValue < 1 || numericValue > 100){
alert("Age must be within range \(1 to 100\)");
return false;
}
else return true;
}
function emailVerification(){
var email1 = document.getElementById("email").value;
var email2 = document.getElementById("emailVer").value;
if (email1==email2){
return true;
}
else alert("Emails are not the same");
return false;
}
</script>
</head>
<body>
<header>
<!-- Main Nav List-->
<nav class="topnav" id="myTopnav">
<ul>
<li class="listLogo"><a href="index.html" class="logo"><img src="images/wixLogoCrop.jpg" alt="Astronomy Ireland logo" id="logoImg"></a><!--logo made with wix logo maker -->
</li>
<li class="narrow"><a href="fun.html">Fun</a></li>
<li class="wide"><a href="gallery.html">Gallery</a></li>
<li class="narrow"><a href="w3c.html">W3C</a></li>
<li class="narrow"><a href="style.html">Style</a></li>
<li class="narrow"><a href="shop.html">Shop</a></li>
<li class="wide active"><a href="contact.html">Contact</a></li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>
</nav>
</header>
<main>
<h1>Please fill out the form to get in contact!</h1>
<form id="details_form" action="confirmationPage.html" method="get" onSubmit="return validateForm();" >
<div class="formGrid"><!--grid container must be within form-->
<div class="col1"><label for="name">Name:</label></div>
<div class="col2"><input name="name" type="text" id="name"></div>
<div class="col1"><label for="age">Age:</label></div>
<div class="col2"><input type="text" name="age" id="age"></div>
<div class="col1"><label for="email">Email Address:</label></div>
<div class="col2"><input type="email" name="email" id="email"></div>
<div class="col1"><label for="emailVer">Retype Email Address:</label></div>
<div class="col2"><input type="email" name="emailVer" id="emailVer"></div>
<div class="col1"><label for="message">Message:</label></div>
<div class="col2"><textarea name="message" cols="45" rows="5" id="message" placeholder="Please let us know how we can help."></textarea></div>
<div class="col2"><input type="submit" name="submit" id="submit" value="Submit" onSubmit="return setCookie();"></div>
</div>
</form>
</main>
<footer>
<div class="grid-footer">
<a href="#" id="item1">About Us</a>
<a href="#" id="item2">Terms and Conditions</a>
<a href="#" id="item3">Privacy Policy</a>
<a href="index.html" id="footerLogo"><img src="images/wixLogoCrop.jpg" alt="Astronomy Ireland logo"></a>
<!--logo made with wix logo maker -->
<div class="footerIcons">
<a href="#" id="item7"><i class="fab fa-twitter"></i></a>
<a href="#" id="item8"><i class="fab fa-facebook"></i></a>
<a href="#" id="item9"><i class="fab fa-instagram"></i></a>
</div>
<p id="authorRow">Author: Eoin Conway</p>
</div>
</footer>
<script>
</script>
</body>
</html>