質問編集履歴
1
コードを追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -32,3 +32,198 @@
|
|
|
32
32
|
```
|
|
33
33
|
|
|
34
34
|
|
|
35
|
+
# 追記情報
|
|
36
|
+
|
|
37
|
+
```php
|
|
38
|
+
<!DOCTYPE html>
|
|
39
|
+
<html lang="ja">
|
|
40
|
+
<head>
|
|
41
|
+
<meta charset="UTF-8">
|
|
42
|
+
<title>お問い合わせフォーム</title>
|
|
43
|
+
<link rel="stylesheet" href="style.css">
|
|
44
|
+
<script type="text/javascript" src="contact.js"></script>
|
|
45
|
+
</head>
|
|
46
|
+
<body>
|
|
47
|
+
<div><h1>Company Name</h1></div>
|
|
48
|
+
<div><h2>お問い合わせ</h2></div>
|
|
49
|
+
<div>
|
|
50
|
+
<form action="confirm.php" method="post" name="form" onsubmit="return validate()">
|
|
51
|
+
<h1 class="contact-title">お問い合わせ 内容入力</h1>
|
|
52
|
+
<p>お問い合わせ内容をご入力の上、「確認画面へ」ボタンをクリックしてください。</p>
|
|
53
|
+
<div>
|
|
54
|
+
<div>
|
|
55
|
+
<label>お名前<span>必須</span></label>
|
|
56
|
+
<input type="text" name="test.name" placeholder="例）山田太郎" value="">
|
|
57
|
+
</div>
|
|
58
|
+
<div>
|
|
59
|
+
<label>ふりがな<span>必須</span></label>
|
|
60
|
+
<input type="text" name="test.furigana" placeholder="例）やまだたろう" value="">
|
|
61
|
+
</div>
|
|
62
|
+
<div>
|
|
63
|
+
<label>メールアドレス<span>必須</span></label>
|
|
64
|
+
<input type="text" name="test.email" placeholder="例）guest@example.com" value="">
|
|
65
|
+
</div>
|
|
66
|
+
<div>
|
|
67
|
+
<label>電話番号<span>必須</span></label>
|
|
68
|
+
<input type="text" name="test.tel" placeholder="例）0000000000" value="">
|
|
69
|
+
</div>
|
|
70
|
+
<div>
|
|
71
|
+
<label>性別<span>必須</span></label>
|
|
72
|
+
<input type="radio" name="sex" value="男性" checked> 男性
|
|
73
|
+
<input type="radio" name="sex" value="女性"> 女性
|
|
74
|
+
</div>
|
|
75
|
+
<div>
|
|
76
|
+
<label>お問い合わせ項目<span>必須</span></label>
|
|
77
|
+
<select name="item">
|
|
78
|
+
<option value="">お問い合わせ項目を選択してください</option>
|
|
79
|
+
<option value="ご質問・お問い合わせ">ご質問・お問い合わせ</option>
|
|
80
|
+
<option value="ご意見・ご感想">ご意見・ご感想</option>
|
|
81
|
+
</select>
|
|
82
|
+
</div>
|
|
83
|
+
<div>
|
|
84
|
+
<label>お問い合わせ内容<span>必須</span></label>
|
|
85
|
+
<textarea name="content" rows="5" placeholder="お問合せ内容を入力"></textarea>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
<button type="submit">確認画面へ</button>
|
|
89
|
+
</form>
|
|
90
|
+
</div>
|
|
91
|
+
</body>
|
|
92
|
+
</html>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
```JavaScript
|
|
97
|
+
var validate = function() {
|
|
98
|
+
|
|
99
|
+
var flag = true;
|
|
100
|
+
|
|
101
|
+
removeElementsByClass("error");
|
|
102
|
+
removeClass("error-form");
|
|
103
|
+
|
|
104
|
+
// お名前の入力をチェック
|
|
105
|
+
if(document.form["test.name"].value == ""){
|
|
106
|
+
errorElement(document.form["test.name"], "お名前が入力されていません");
|
|
107
|
+
flag = false;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// ふりがなの入力をチェック
|
|
111
|
+
if(document.form["test.furigana"].value == ""){
|
|
112
|
+
errorElement(document.form["test.furigana"], "ふりがなが入力されていません");
|
|
113
|
+
flag = false;
|
|
114
|
+
} else {
|
|
115
|
+
// メールアドレスの形式をチェック
|
|
116
|
+
if(!validateKana(document.form["test.furigana"].value)){
|
|
117
|
+
errorElement(document.form["test.furigana"], "ひらがな以外の文字が入っています");
|
|
118
|
+
flag = false;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// メールアドレスの入力をチェック
|
|
123
|
+
if(document.form["test.email"].value == ""){
|
|
124
|
+
errorElement(document.form["test.email"], "メールアドレスが入力されていません");
|
|
125
|
+
flag = false;
|
|
126
|
+
} else {
|
|
127
|
+
// メールアドレスの形式をチェック
|
|
128
|
+
if(!validateMail(document.form["test.email"].value)){
|
|
129
|
+
errorElement(document.form["test.email"], "メールアドレスが正しくありません");
|
|
130
|
+
flag = false;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
// 電話番号の入力をチェック
|
|
135
|
+
if(document.form.tel["test.tel"] == ""){
|
|
136
|
+
errorElement(document.form["test.tel"], "電話番号が入力されていません");
|
|
137
|
+
flag = false;
|
|
138
|
+
} else {
|
|
139
|
+
// 電話番号の形式をチェック
|
|
140
|
+
if(!validateNumber(document.form["test.tel"].value)){
|
|
141
|
+
errorElement(document.form["test.tel"], "半角数字のみを入力してください");
|
|
142
|
+
flag = false;
|
|
143
|
+
} else {
|
|
144
|
+
if(!validateTel(document.form["test.tel"].value)){
|
|
145
|
+
errorElement(document.form["test.tel"], "電話番号が正しくありません");
|
|
146
|
+
flag = false;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// お問い合わせ項目の選択をチェック
|
|
152
|
+
if(document.form["test.item"].value == ""){
|
|
153
|
+
errorElement(document.form["test.item"], "お問い合わせ項目が選択されていません");
|
|
154
|
+
flag = false;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
// お問い合わせ内容の入力をチェック
|
|
158
|
+
if(document.form["test.content"].value == ""){
|
|
159
|
+
errorElement(document.form["test.content"], "お問い合わせ内容が入力されていません");
|
|
160
|
+
flag = false;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
return flag;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
var errorElement = function(form, msg) {
|
|
169
|
+
form.className = "error-form";
|
|
170
|
+
var newElement = document.createElement("div");
|
|
171
|
+
newElement.className = "error";
|
|
172
|
+
var newText = document.createTextNode(msg);
|
|
173
|
+
newElement.appendChild(newText);
|
|
174
|
+
form.parentNode.insertBefore(newElement, form.nextSibling);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
var removeElementsByClass = function(className){
|
|
179
|
+
var elements = document.getElementsByClassName(className);
|
|
180
|
+
while (elements.length > 0){
|
|
181
|
+
elements[0].parentNode.removeChild(elements[0]);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
var removeClass = function(className){
|
|
186
|
+
var elements = document.getElementsByClassName(className);
|
|
187
|
+
while (elements.length > 0) {
|
|
188
|
+
elements[0].className = "";
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
var validateMail = function (val){
|
|
193
|
+
if (val.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)==null) {
|
|
194
|
+
return false;
|
|
195
|
+
} else {
|
|
196
|
+
return true;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
var validateNumber = function (val){
|
|
202
|
+
if (val.match(/[^0-9]+/)) {
|
|
203
|
+
return false;
|
|
204
|
+
} else {
|
|
205
|
+
return true;
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
var validateTel = function (val){
|
|
211
|
+
if (val.match(/^[0-9-]{6,13}$/) == null) {
|
|
212
|
+
return false;
|
|
213
|
+
} else {
|
|
214
|
+
return true;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
var validateKana = function (val){
|
|
220
|
+
if (val.match(/^[ぁ-ん]+$/) == null) {
|
|
221
|
+
return false;
|
|
222
|
+
} else {
|
|
223
|
+
return true;
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
|