-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform.html
147 lines (141 loc) · 4.54 KB
/
form.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My lovely form</title>
<meta name="keywords" content="form, login, sign in">
<meta name="description" content="This is my fancy form">
<style>
body {
font-family:Arial, Helvetica, sans-serif;
width:50%; left:50%; margin-left:25%
}
h1 { border-bottom:1px solid black }
fieldset { margin:0; padding:0; border:0 }
button {
color:#000;
padding:8px 14px;
background:#D6D800;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px solid #BCC505;
cursor:pointer
}
button:hover { background: #E6D833 }
p { overflow:auto; width: 100% }
.textinput { float:right; min-width: 50% }
.msg-error { color:red; display:none; font-size:0.8em }
</style>
</head>
<body>
<h1>My lovely Form</h1>
<form id="myform" method="post" action="do-login.html" accept-charset="UTF-8">
<fieldset>
<p>
<label> Name:
<span class="msg-error">* at least 3 characters</span>
<input type="text" name="name" class="textinput" placeholder="Your Name"/>
</label>
</p>
<p>
<label> eMail:
<span class="msg-error">* invalid mail address</span>
<input type="text" name="mail" class="textinput" placeholder="Your Mail"/>
</label>
</p>
<p>
<label> Phone:
<input type="text" name="phone" class="textinput" placeholder="e.g. 40 343434"/>
</label>
</p>
</fieldset>
<fieldset>
<p>
<label>I accept the TandC
<span class="msg-error">*</span>
<input type="checkbox" name="terms" value="accepted"/>
</label>
</p>
</fieldset>
<p>
<button type="submit" name="submit">Send me</button>
</p>
</form>
<script>
// form Handler
; (function(formid) {
var formobj = document.getElementById(formid)
// select element
, selector = function(parent, inputname) {
if(document.querySelector)
return parent.querySelector('[name='+inputname+']');
// support for browsers without querySelector (ie7, ie8 non standard)
var items = document.getElementsByName(inputname) // all doc inputs
, result = null;
for(var i=0; i < items.length; i++) {
var el = items[i].parentNode;
while(el != null) {
if(el.id === parent.id) { // stop if parent found
result = items[i]; // this is our input
break;
}
el = el.parentNode;
}
}
return result;
}
// elements
, form = {
name : selector(formobj, 'name'),
mail : selector(formobj, 'mail'),
phone : selector(formobj, 'phone'),
terms : selector(formobj, 'terms')
}
// validation functions
, valid = {
name: function(text) {
return text.length >= 3;
},
mail: function(text) {
var regm = /^([a-z0-9_\+\.-]+)@([a-z0-9_\.-]+)\.([a-z]{2,6})$/i;
return regm.test(text);
}
},
// Display error if necessary
// el: param for display error
// show: true if error must be displayed
cerror = function(el, show) {
var prev = el.previousElementSibling;
// support for ie8 and ie7 (slower method)
if(!prev) {
var n = el.previousSibling;
while(n.nodeType != 1) {
n = n.previousSibling;
}
prev = n;
}
prev.style.display = (show === true) ? 'inline' : 'none';
}
;
// on input name blur
form.name.onblur = function() {
cerror(this, !valid.name(this.value));
};
// on input mail blur
form.mail.onblur = function() {
cerror(this, !valid.mail(this.value));
};
// on form submit event handler
formobj.onsubmit = function() {
// display error messages if needed
cerror(form.name, !valid.name(form.name.value));
cerror(form.mail, !valid.mail(form.mail.value));
cerror(form.terms, !form.terms.checked);
return valid.name(form.name.value) && valid.mail(form.mail.value)
&& form.terms.checked;
};
})('myform');
</script>
</body>
</html>