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
|
<html>
<head>
<title>Finalize Your Order</title>
<script type="text/javascript"><!-- hide from old browsers
function validate_order (form) {
var alertstr = '';
var invalid = 0;
// skip validation if they clicked "Cancel"
if (form._submit.value == 'Cancel') return true;
// first_name: standard text, hidden, password, or textarea box
var first_name = form.elements['first_name'].value;
if (first_name == null || first_name === "") {
alertstr += '- Invalid entry for the "First Name" field\n';
invalid++;
}
// last_name: standard text, hidden, password, or textarea box
var last_name = form.elements['last_name'].value;
if (last_name == null || last_name === "") {
alertstr += '- Invalid entry for the "Last Name" field\n';
invalid++;
}
// email: standard text, hidden, password, or textarea box
var email = form.elements['email'].value;
if (email == null || ! email.match(/^[\w\-\+\._]+\@[a-zA-Z0-9][-a-zA-Z0-9\.]*\.[a-zA-Z]+$/)) {
alertstr += '- Invalid entry for the "Email" field\n';
invalid++;
}
// send_me_emails: radio group or multiple checkboxes
var send_me_emails = null;
var selected_send_me_emails = 0;
for (var loop = 0; loop < form.elements['send_me_emails'].length; loop++) {
if (form.elements['send_me_emails'][loop].checked) {
send_me_emails = form.elements['send_me_emails'][loop].value;
selected_send_me_emails++;
if (send_me_emails == null || send_me_emails === "") {
alertstr += '- Choose one of the "Send Me Emails" options\n';
invalid++;
}
} // if
} // for send_me_emails
if (! selected_send_me_emails) {
alertstr += '- Choose one of the "Send Me Emails" options\n';
invalid++;
}
// address: standard text, hidden, password, or textarea box
var address = form.elements['address'].value;
if (address == null || address === "") {
alertstr += '- Invalid entry for the "Address" field\n';
invalid++;
}
// state: select list, always assume it's multiple to get all values
var state = null;
var selected_state = 0;
for (var loop = 0; loop < form.elements['state'].options.length; loop++) {
if (form.elements['state'].options[loop].selected) {
state = form.elements['state'].options[loop].value;
selected_state++;
if (state == null || state === "") {
alertstr += '- Select an option from the "State" list\n';
invalid++;
}
} // if
} // for state
if (! selected_state) {
alertstr += '- Select an option from the "State" list\n';
invalid++;
}
// zipcode: standard text, hidden, password, or textarea box
var zipcode = form.elements['zipcode'].value;
if (zipcode == null || ! zipcode.match(/^\d{5}$|^\d{5}\-\d{4}$/)) {
alertstr += '- Invalid entry for the "Zipcode" field\n';
invalid++;
}
// credit_card: standard text, hidden, password, or textarea box
var credit_card = form.elements['credit_card'].value;
if (credit_card == null || ! credit_card.match(/^\d{4}[\- ]?\d{4}[\- ]?\d{4}[\- ]?\d{4}$|^\d{4}[\- ]?\d{6}[\- ]?\d{5}$/)) {
alertstr += '- Invalid entry for the "Credit Card" field\n';
invalid++;
}
// expiration: standard text, hidden, password, or textarea box
var expiration = form.elements['expiration'].value;
if (expiration == null || ! expiration.match(/^(0?[1-9]|1[0-2])\/?[0-9]{2}$/)) {
alertstr += '- Invalid entry for the "Expiration" field\n';
invalid++;
}
if (invalid > 0 || alertstr != '') {
if (! invalid) invalid = 'The following'; // catch for programmer error
alert(''+invalid+' error(s) were encountered with your submission:'+'\n\n'
+alertstr+'\n'+'Please correct these fields and try again.');
// reset counters
alertstr = '';
invalid = 0;
return false;
}
return true; // all checked ok
}
//-->
</script>
</head>
<body>
<h3>Finalize Your Order</h3>
<noscript><span class="shop_invalid">Please enable Javascript or use a newer browser.</span></noscript>
<p>Fields that are <span class="shop_required">highlighted</span> are required.</p>
<form action="TEST" id="order" method="post" name="order" onsubmit="return validate_order(this);">
<div>
<input id="_submitted_order" name="_submitted_order" type="hidden" value="1" />
<table class="shop">
<tr id="order_first_name_row">
<td class="shop_label" id="order_first_name_label"><span class="shop_required">First Name</span></td>
<td class="shop_field" id="order_first_name_field"><input class="shop_input" id="first_name" name="first_name" type="text" /></td>
</tr>
<tr id="order_last_name_row">
<td class="shop_label" id="order_last_name_label"><span class="shop_required">Last Name</span></td>
<td class="shop_field" id="order_last_name_field"><input class="shop_input" id="last_name" name="last_name" type="text" /></td>
</tr>
<tr id="order_email_row">
<td class="shop_label" id="order_email_label"><span class="shop_required">Email</span></td>
<td class="shop_field" id="order_email_field"><input class="shop_input" id="email" name="email" type="text" value="pete@peteson.com" /></td>
</tr>
<tr id="order_send_me_emails_row">
<td class="shop_label" id="order_send_me_emails_label"><span class="shop_required">Send Me Emails</span></td>
<td class="shop_field" id="order_send_me_emails_field"><table class="shop_columns">
<tr>
<td><input class="shop_radio" id="send_me_emails_1" name="send_me_emails" type="radio" value="1" /></td>
<td><label class="shop_option" for="send_me_emails_1">Yes</label></td>
</tr>
<tr>
<td><input checked="checked" class="shop_radio" id="send_me_emails_0" name="send_me_emails" type="radio" value="0" /></td>
<td><label class="shop_option" for="send_me_emails_0">No</label></td>
</tr>
</table></td>
</tr>
<tr id="order_address_row">
<td class="shop_label" id="order_address_label"><span class="shop_required">Address</span></td>
<td class="shop_field" id="order_address_field"><input class="shop_input" id="address" name="address" type="text" /></td>
</tr>
<tr id="order_state_row">
<td class="shop_label" id="order_state_label"><span class="shop_required">State</span></td>
<td class="shop_field" id="order_state_field"><select class="shop_select" id="state" name="state">
<option value="">-select-</option>
<option value="DJ">DJ</option>
<option value="EE">EE</option>
<option value="HI">HI</option>
<option value="IW">IW</option>
<option value="JS">JS</option>
<option value="JS">JS</option>
<option value="KS">KS</option>
<option value="NK">NK</option>
<option value="TY">TY</option>
<option value="UR">UR</option>
<option value="UW">UW</option>
<option value="YK">YK</option>
</select></td>
</tr>
<tr id="order_zipcode_row">
<td class="shop_label" id="order_zipcode_label"><span class="shop_required">Zipcode</span></td>
<td class="shop_field" id="order_zipcode_field"><input class="shop_input" id="zipcode" name="zipcode" type="text" /></td>
</tr>
<tr id="order_credit_card_row">
<td class="shop_label" id="order_credit_card_label"><span class="shop_required">Credit Card</span></td>
<td class="shop_field" id="order_credit_card_field"><input class="shop_input" id="credit_card" name="credit_card" type="text" /></td>
</tr>
<tr id="order_expiration_row">
<td class="shop_label" id="order_expiration_label"><span class="shop_required">Expiration</span></td>
<td class="shop_field" id="order_expiration_field"><input class="shop_input" id="expiration" name="expiration" type="text" /></td>
</tr>
<tr id="order_submit_row">
<td class="shop_submit" colspan="2" id="order_submit_field"><input class="shop_button" id="order_submit" name="_submit" onclick="this.form._submit.value = this.value;" type="submit" value="Place Order" /><input class="shop_button" id="order_submit_2" name="_submit" onclick="this.form._submit.value = this.value;" type="submit" value="Cancel" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
