-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsingolo3.html
99 lines (95 loc) · 4.63 KB
/
singolo3.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Singolo 3</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous"/>
<link rel="stylesheet" href="singolo3.css">
</head>
<body>
<section class="quote">
<h2 class="quote header">Get a Quote</h2>
<p class="quote description">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum. Duis mollis, non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
</p>
<div class="quote__block">
<form method="POST" id="form" novalidate>
<input type="text" name="user_name" id="name" placeholder="Name (Required)" required>
<input type="email" name="user_email" id="email" placeholder="Email (Required)" required>
<input type="text" name="user_subject" id="subject" placeholder="Subject">
<textarea name="user_description" id="description" placeholder="Describe your project in detail..." max-length="4000"></textarea>
<div>
<div class="error" id="error"></div>
<input type="submit" value="Send">
</div>
</form>
<div class="quote__contacts">
<h3 class="header contacts">Contact Information</h3>
<p class="description contacts">Quisque hendrerit purus dapibus, ornare nibh vitae, viver-<br>ra nibh. Fusce vitae aliquam tellus. Proin sit amet volutpat libero. Nulla sed nunc et tortor luctus faucibus. Morbi at aliquet turpis, et consequat felis.</p>
<ul>
<li class="location">Elm St. 14/05 Lost City</li>
<li class="phone">
<a href="tel:035283318635">03528 331 86 35</a>
</li>
<li class="email">
<a href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
</div>
</div>
</section>
<footer>
<div class="copyright">© Copyright 2013</div>
<div class="media footer">
<div class="media-site">
<div class="facebook"></div>
</div>
<div class="media-site">
<div class="google"></div>
</div>
<div class="media-site">
<div class="twitter"></div>
</div>
<div class="media-site">
<div class="linkedin"></div>
</div>
</div>
</footer>
<script language="javascript">
let name = document.getElementById('name');
let form = document.getElementById('form');
let email = document.getElementById('email');
function validationRequired(input) {
error.innerHTML = 'Please provide values to all fields highlighted above';
input.classList.add("required");
event.preventDefault();
}
form.addEventListener('submit', function (event) {
if (name.value == "" && email.value == "") {
validationRequired(name);
validationRequired(email);
}
if (name.value == "") {
validationRequired(name);
}
if (email.value == "") {
validationRequired(email);
}
if (!email.value.match(/^[0-9a-z-\.]+\@[0-9a-z-]{2,}\.[a-z]{2,}$/i) && email.value != '') {
error.innerHTML = 'Provided e-mail address is incorrect.';
event.preventDefault();
}
}, false);
email.addEventListener('input', function (event) {
if (email.classList.contains('required')) {
email.classList.remove('required');
}
}, false);
name.addEventListener('input', function (event) {
if (name.classList.contains('required')) {
name.classList.remove('required');
}
}, false);
</script>
</body>
</html>