お問合せ入力フォームのエラーチェックにjQueryプラグインのjquery.validate.min.jsを利用します。必須入力チェック以外にも、入力フォームの項目に合わせて様々なエラーチェックが設定できます。
htmlのコードは下記になります。
formタグにはid=”contactForm”を付与します。action属性は空にしています。チェックボックスのname属性は、name=”privacy_policy[]”のように配列にします。
<form method="post" action="" id="contactForm">
<table class="contact_form">
<tr>
<th class="required">お名前（漢字）</th>
<td><input type="text" name="name" size="58" value="" placeholder="例）山田 太郎"></td>
</tr>
<tr>
<th class="required">お名前（ふりがな）</th>
<td><input type="text" name="furigana" size="58" value="" placeholder="例）やまだ たろう"></td>
</tr>
<tr>
<th>会社名／団体名</th>
<td><input type="text" name="corp_name" size="58" value="" placeholder="例）株式会社〇〇〇"></td>
</tr>
<tr>
<th class="required">電話番号</th>
<td><input type="text" name="tel" size="58" value="" placeholder="例）0312345678"></td>
</tr>
<tr>
<th class="required">メールアドレス</th>
<td><input type="text" name="email" size="58" value="" placeholder="例）example@example.co.jp" id="email"></td>
</tr>
<tr>
<th class="required">メールアドレス（確認）</th>
<td><input type="text" name="email_conf" size="58" value="" placeholder="例）example@example.co.jp"></td>
</tr>
<tr>
<th class="required top-cell">お問合せ内容</th>
<td class="text-area"><textarea name="content" cols="48" rows="5" placeholder="お問合せ内容を記入してください。"></textarea></td>
</tr>
<tr>
<th class="required">個人情報の取扱について</th>
<td>
<label class="checkbox_label"><input type="checkbox" name="privacy_policy[]" value="個人情報保護方針に同意する">
<span class="checkbox_txt">個人情報保護方針に同意する</span></label>
</td>
</tr>
</table>
<button type="submit" name="submitConfirm" value="" class="confirm_btn">確認画面へ</button>
</form>続いてCSSのコードです。
チェックボックスの装飾はチェックボックスを非表示にして疑似クラスで装飾するのが一般的です。ですが今回はプラグインを利用しているため、チェックボックスを非表示にするとプラグインが動かなくなってしまいます。そのためデフォルトのチェックボックスのサイズのみ変更しています。プラグインで表示されるエラーメッセージはクラス名errorの付与されたlabelタグに内包されますので、その部分のCSSも記述します。また、スマホ表示時はメディアクエリでフォームの見出しと項目を縦並びにします。
.contact_form {
border-collapse: collapse;
margin: 0 auto;
}
.contact_form tr {
border-top: solid 1px #dddddd;
}
.contact_form tr:last-child {
border-bottom: solid 1px #dddddd;
}
.contact_form th {
position: relative;
width: 280px;
padding: 20px;
background: #f9f9f9;
text-align: left;
vertical-align: top;
box-sizing: border-box;
}
.contact_form th.required:before {
content: "必須";
width: 48px;
height: 28px;
position: absolute;
top: 21px;
right: 20px;
background: #d70d19;
color: #ffffff;
font-size: 14px;
line-height: 28px;
text-align: center;
}
.contact_form td {
padding: 14px 20px;
box-sizing: border-box;
}
.contact_form input[type="text"],
.contact_form textarea {
max-width: 300px;
background: #f9f9f9;
border: solid 1px #dddddd;
font-size: 16px;
padding: 12px 20px;
transition: 0.3s ease-in-out;
box-sizing: border-box;
vertical-align: top;
outline: none;
}
.contact_form input[type="text"]:focus,
.contact_form textarea:focus {
border-color: #d70d19;
}
.contact_form input[type="checkbox"] {
width: 20px;
height: 20px;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.contact_form .checkbox_label {
cursor: pointer;
}
.contact_form .checkbox_txt {
vertical-align: top;
}
.contact_form label.error {
display: block;
margin: .3em 0 0 0;
color: #d70d19;
}
.confirm_btn {
display: block;
width: 100%;
max-width: 200px;
margin: 30px auto 0;
padding: 0;
outline: none;
border: none;
background: #d70d19;
border-radius: 40px;
color: #ffffff;
font-size: 16px;
font-weight: bold;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
@media screen and (max-width: 680px) {
.contact_form tr,
.contact_form td {
display: block;
width: 100%;
}
.contact_form th {
display: block;
width: 100%;
padding: 20px 20px 0;
}
}最後にjQueryのコードです。
formタグに付与したidを指定して、下記の記述でプラグインを動作させます。
$(‘#contactForm’).validate();
エラーチェックの中身はvalidate();の中に記述していきます。
rulesにエラーチェックの種類、messagesにエラーチェックの文言、errorPlacementにエラーチェックの文言を記述する場所を設定します。エラーチェックの文言を記述する場所はチェックボックスとそれ以外で分けています。insertAfterを利用して対象要素の直後に出力しています。
$(function() {
if($('#contactForm').length) {
$('#contactForm').validate({
rules: {
name: {
required: true
},
furigana: {
required: true
},
tel: {
required: true,
number: true
},
email: {
required: true,
email: true
},
email_conf: {
required: true,
email: true,
equalTo: '#email'
},
content: {
required: true,
maxlength: 100
},
'privacy_policy[]': {
required: true
}
},
messages: {
name: {
required: '必須項目です。入力をお願いします。'
},
furigana: {
required: '必須項目です。入力をお願いします。'
},
email: {
required: '必須項目です。入力をお願いします。',
email: 'Eメールの形式で入力して下さい。'
},
email_conf: {
required: '必須項目です。入力をお願いします。',
email: 'Eメールの形式で入力して下さい。',
equalTo: '入力した値が一致しません。'
},
tel: {
required: '必須項目です。入力をお願いします。',
number: '数字のみ入力出来ます。'
},
content: {
required: '必須項目です。入力をお願いします。',
maxlength: '最大文字数100を超えています。文章を短くして下さい。'
},
'privacy_policy[]': {
required: '必須項目です。選択して下さい。'
}
},
errorPlacement: function(error, element) {
if(element.attr("name") == 'privacy_policy[]') {
error.insertAfter(".checkbox_label");
} else {
error.insertAfter(element);
}
}
});
}
});