お世話になっております。コウヤです。
課題も並行しつつ、上級編へそろそろ進もうとしておりますが、フォームのバリデーションチェックに関して記事を書き忘れたのでここで紹介します！
過去にフォームのデザイン（テキスト・テキストエリア）について説明しました。こちらもあわせて確認していただければと思います。（必須ではありませんが、デザインをしているという前提で話を進めていきます）
https://qiita.com/ko0821/items/3359c891315a2b989f64
また、チェックボックスに関する記事やラジオボタンに関するデザインの記事のリンクもありますのでご確認ください。
【チェックボックス】
https://qiita.com/ko0821/items/d600bbe372e8146effda
【ラジオボタン】
https://qiita.com/ko0821/items/19c4c15ef9cf1aba6c20
【プルダウンメニュー】
https://qiita.com/ko0821/items/86a50198bf9a9ba51843
バリデーションチェックとは
フォームには必須事項というものがあります。上記リンク先でも作ったフォームには「必須」の項目がありましたが、もしその箇所が未入力の場合にはボタンを無効化したままにしておくといったこともできるようになります。
バリデーションチェックには色々と種類がありますが、今回はボタン無効化をデフォルトとし、必須事項をすべて入力したら有効化していくといったことをjQueryを用いて対処していきたいと思います。
大まかな流れとして、
フォームの作成→submitボタンの無効化→jQueryコードの記載
としていきます。
現状のコードの記載
まずはバリデーションチェックをする前のコードを記載していきます。少し長いですが、コピー＆ペーストで記載しても構いません。
.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/script_jQ.js"></script>
<title>フォームデザイン（バリデーションチェック）</title>
<style type="text/css">
.ly__wrapper {
margin: 0 auto;
max-width: 375px;
}
.EntryForm__area {
padding-top: 98px;
background-color: white;
border-radius: 15px;
max-width: 1140px;
height: 2500px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
}
.EntryForm__area .EntryForm__title {
color: #333;
font-family: Noto Sans JP;
font-size: 26px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-align: center;
margin-bottom: 48px;
}
.Form__Q {
display: flex;
flex-direction: column;
margin-bottom: 61px;
}
.Form__Q p {
margin-bottom: 10px;
}
.Form__Q label {
font-size: 16px;
}
/*必須に関するデザイン*/
.required::before {
content: "必須";
margin-right: 15px;
color: #FFF;
font-family: Noto Sans JP;
font-weight: 400;
line-height: 100%;
background: #339999;
width: auto;
height: 27px;
flex-shrink: 0;
padding-top: 4px;
padding-right: 5px;
padding-bottom: 4px;
padding-left: 5px;
}
/****************************************/
/*テキストフォーム・テキストエリアフォーム*/
/****************************************/
.FormArea input[type=text],
.FormArea input[type=mail],
.FormArea input[type=tel] {
padding-left: 14px;/*左ぴったりくっつかないように*/
border-radius: 4px;/*フォーム枠を丸くする*/
border: 1px solid #666;
background: rgba(217, 217, 217, 0);
height: 40px;
width: 95%;/*枠の幅*/
max-width: 300px;/*ただし幅は最大でも300px*/
font-family: Noto Sans JP;
font-size: 16px;
font-weight: 400;
line-height: 100%;
}
.FormArea input[type=number]{
padding-left: 14px;/*左ぴったりくっつかないように*/
border-radius: 4px;/*フォーム枠を丸くする*/
border: 1px solid #666;
background: rgba(217, 217, 217, 0);
height: 40px;/*枠の縦幅*/
width: 95%;/*枠の横幅*/
max-width: 150px;/*ただし幅は最大でも150px*/
font-family: Noto Sans JP;
font-size: 16px;
font-weight: 400;
line-height: 100%;
}
textarea {
padding-left: 14px;
padding-top:14px;
border-radius: 4px;
border: 1px solid #666;
background: rgba(217, 217, 217, 0);
height: 100px;
width: 95%;
min-width: 300px;
font-family: Noto Sans JP;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 100%;
}
/****************************************/
/*プルダウンメニュー**********************/
/****************************************/
.FormArea select {
margin-top:10px;
padding-left: 14px;
border-radius: 4px;
border: 1px solid #666;
background: rgba(217, 217, 217, 0);
height: 40px;
width: 30%;
min-width: 200px;
font-family: Noto Sans JP;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 16px */
cursor: pointer;
}
/****************************************/
/*チェックボックス************************/
/****************************************/
/*まずはデフォルトのチェックボックスの枠を消す*/
.FormArea input[type=checkbox] {
opacity: 0;
position: absolute;
}
/*ラベルの文字の設定*/
.FormArea input[type="checkbox"]+span {
display: block;
position: relative;
padding: 0.3em 0.3em 0.3em 40px;
line-height: 1;
cursor: pointer;
margin-bottom: 15px;
border:1px dotted #fff;
}
/*新たにチェックボックス枠を作成する*/
.FormArea input[type="checkbox"]+span:before {
position: absolute;
top: 0.1em;
left: 0;
content: "";
width: 25px;
height: 25px;
border: 1px solid #666;
background: #eee;
line-height: 1;
}
/*チェックボックス未チェック時*/
input[type="checkbox"]+span:after {
content: "";
display: none;
}
/*チェックボックスチェック時*/
input[type="checkbox"]:checked+span:after {
display: block;
position: absolute;
background-color:#339999;
top: 0.15em;
left: 0.45em;
width: 0.3em;
height: 0.9em;
content: "";
border-bottom: 3px solid white;
border-right: 3px solid white;
transform: rotate(45deg);
}
/*チェックボックスでチェックしたときにチェックボックスの背景の色を変える*/
.FormArea input[type="checkbox"]:checked+span:before {
background: #339999;
}
/*チェックボックスでチェックしたときにラベルの色を変える*/
.FormArea input[type="checkbox"]:checked+span{
color:#339999;
font-weight: 700;
}
/*選択時にマウスをホバーさせた際に枠を出力*/
.FormArea input[type="checkbox"]+span:hover{
border:1px dotted #999;
}
/*Tabキーで選択できるようにする*/
.FormArea input[type="checkbox"]:focus+span{
border:1px dotted #999;
}
/****************************************/
/*チェックボックス************************/
/****************************************/
.FormArea input[type=radio] {
opacity: 0;
position: absolute;
}
/*クリック範囲を指定している*/
.FormArea input[type="radio"]+span {
display: block;/*縦表記するにはblock、横表記するにはinline-block*/
position: relative;
padding: 0.3em 0.3em 0.3em 40px;/*左から40pxの位置にラベルを置くため*/
line-height: 1;
cursor: pointer;
margin-bottom: 15px;
border:1px dotted #fff;
}
/*ラジオボタンの枠を描く*/
.FormArea input[type=radio] + span::before {
content: "";/*一旦空白を置く*/
position: absolute;
width: 26px;
height: 26px;
border-radius: 50%;
border:1px solid #ccc;
background-color: #eee;
box-sizing: border-box;
top: 2px;
left: 0px;
}
/*ラジオボタンをチェックした際の●を描く*/
.FormArea input[type=radio]:checked + span::after {
content: "";
position: absolute;
width: 26px;
height: 26px;
border-radius: 50%;
border: 9px solid #339999;
top: 2px;
left: 0px;
box-sizing: border-box;
}
/*マウスをラベルの載せたときに枠を表示*/
input[type="radio"]+span:hover{
border:1px dotted #999;
}
/*チェックした際の文字の色を変更*/
.FormArea input[type="radio"]:checked+span{
color:#339999;
font-weight: 700;;
}
/*tabキーで選択できるようにする*/
.FormArea input[type="radio"]:focus+span{
border:1px dotted #999;
}
/****************************************/
/*フォームボタン**************************/
/****************************************/
.Form__btn{
margin-top: 50px;
text-align: center;
}
.btn {
margin-top:50px;
cursor: pointer;
background-color: #005eb8;
border:2px solid #005eb8;
width: 330px;
height: 84px;
border-radius: 42px;
color: white;
font-size: 18px;
font-weight: 700;
}
/*PCでのデザイン*/
@media screen and (min-width:768px) {
.ly__wrapper {
margin: 0 auto;
max-width: 768px;
}
.Form__Q label {
font-size: 20px;
}
.FormArea input[type=text],
.FormArea input[type=mail],
.FormArea input[type=tel] {
max-width: 700px;/*ただし幅は最大でも300px*/
}
.FormArea input[type=number]{
max-width: 350px;/*ただし幅は最大でも300px*/
}
textarea {
height: 100px;
min-width: 700px;
}
}
</style>
</head>
<body>
<main>
<div class="ly__wrapper">
<div class="EntryForm__area">
<h1 class="EntryForm__title">フォームデザイン（バリデーションチェック）</h1>
<form class="FormArea" action="#"method="post" target="_self">
<div class="Form__Q">
<p><label for="name"class="required">お名前</label></p>
<div class="Form__input_area">
<input type="text" id="name" name="name" placeholder="例）田中太郎">
</div>
</div>
<div class="Form__Q">
<p><label for="age"class="required">ご年齢</label></p>
<div class="Form__input_area">
<input type="number" id="age" name="age" placeholder="例）26">
</div>
</div>
<div class="Form__Q">
<p><label for="pref" class="required">お住いの都道府県</label></p>
<select name="pref" id="pref">
<option value="" selected>都道府県</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
</div>
<div class="Form__Q">
<p><label for="tel">電話番号</label></p>
<div class="Form__input_area">
<input type="tel" id="tel" name="tel" placeholder="例）090-xxxx-xxxx">
</div>
</div>
<div class="Form__Q">
<p><label for="email" class="required">メールアドレス</label></p>
<div class="Form__input_area">
<input type="mail" id="email" name="email" placeholder="例）example@example.com">
</div>
</div>
<div class="Form__Q">
<p><label for="exam"class="required">今後受験予定のIPA試験を選択してください（複数選択可能）</label></p>
<div>
<label><input type="checkbox" id="exam01" name="exam" value="st"><span>ITストラテジスト試験</span></label>
<label><input type="checkbox" id="exam02" name="exam" value="sa"><span>システムアーキテクト試験</span></label>
<label><input type="checkbox" id="exam03" name="exam" value="pm"><span>プロジェクトマネージャ試験</span></label>
<label><input type="checkbox" id="exam04" name="exam" value="nw"><span>ネットワークスペシャリスト試験</span></label>
<label><input type="checkbox" id="exam05" name="exam" value="db"><span>データベーススペシャリスト試験</span></label>
<label><input type="checkbox" id="exam06" name="exam" value="es"><span>エンベデッドシステムスペシャリスト試験</span></label>
<label><input type="checkbox" id="exam07" name="exam" value="sm"><span>ITサービスマネージャ試験</span></label>
<label><input type="checkbox" id="exam08" name="exam" value="au"><span>システム監査技術者試験</span></label>
<label><input type="checkbox" id="exam09" name="exam" value="sc"><span>情報処理安全確保支援士試験</span></label>
<label><input type="checkbox" id="exam10" name="exam" value="ap"><span>応用情報技術者試験</span></label>
</div>
</div>
<div class="Form__Q">
<p><label for="pg_lang" class="required">興味のあるプログラミング言語を選択してください</label></p>
<div>
<label><input type="radio" id="pg_lang01" name="pg_lang" value="C"><span>C</span></label>
<label><input type="radio" id="pg_lang02" name="pg_lang" value="Java" ><span>Java</span></label>
<label><input type="radio" id="pg_lang03" name="pg_lang" value="Python"><span>Python</span></label>
<label><input type="radio" id="pg_lang04" name="pg_lang" value="Javascript" ><span>Javascript</span></label>
<label><input type="radio" id="pg_lang05" name="pg_lang" value="Visual Basic" ><span>Visual Basic</span></label>
<label><input type="radio" id="pg_lang06" name="pg_lang" value="PHP" ><span>PHP</span></label>
<label><input type="radio" id="pg_lang07" name="pg_lang" value="Cpp" ><span>C++</span></label>
</div>
</div>
<div class="Form__Q">
<p><label for="comment">なにか一言お願いします</label></p>
<div class="Form__input_area">
<textarea id="comment" name="comment" class="not_required_form"></textarea>
</div>
<div class="Form__btn">
※必須項目をすべて入力するとボタンが有効化されます<br>
<a href="#" >
<input type="submit" value="送信する" class="btn" disabled>
</a>
</div>
</form>
</div>
</div>
</main>
</body>
</html>
jQueryのダウンロード
jQueryの設定方法については以下をご覧ください。
https://qiita.com/ko0821/items/8d7c063f7473eff59a9b#%E6%9B%B8%E3%81%8D%E6%96%B9%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6
submitボタンの無効化
今回、デフォルトではボタンをグレーアウトにしておいて、必須個所をすべて入力しないと有効化できないようにします。
ここでは無効化にする方法を説明します。
HTMLのボタンの箇所を以下のように書き換えました。属性にdisableを入れると無効化となります。
.html
<div class="Form__btn">
※必須項目をすべて入力するとボタンが有効化されます<br>
<a href="#" >
<input type="submit" value="送信する" class="btn" disabled>
</a>
</div>
次にCSSの箇所で無効化設定を行います。
.css
/*submitボタンを無効化*/
.btn {
background-color: #ccc;
width: 330px;
height: 84px;
border-radius: 42px;
border: 0;
color: white;
font-family: Noto Sans JP;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
position: relative;
}
/*****以下は必須項目すべて入力した際に有効化する*****/
.btn-active {
background-color: #005eb8;
width: 330px;
height: 84px;
border-radius: 42px;
border: 0;
color: white;
font-family: Noto Sans JP;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
position: relative;
position: relative;
cursor: pointer;
}
.btn-active a {
display: block;
line-height: 76px;
color: #fff;
font-family: Noto Sans JP;
font-size: 18px;
font-style: normal;
font-weight: 700;
transition: 0.5s;
}
すると以下のようにボタンがグレーになります。
ボタンをクリックしても、HTMLでdisableと設定し、さらにCSSで色をグレーにしてボタンが押せないようにしました。
jQueryの設定
まず、headタグ内にjQueryが設定されていることを確認してください。
フォルダ構成は以下のとおりです。
.html
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/script_jQ.js"></script>
このscript_jQ.jsにコードを記載していきます。
.js
/*jQueryエリア*/
$(function(){
//バリデーションチェック
$(document).ready(function () {
//ボタンを定義
const $submitBtn = $('.btn');
$('.FormArea input').on('input', function () {
//チェックボックスで何個チェックされたかの変数を定義
let checkbox_chk = $('.FormArea input[name="exam"]:checked').length;
//ラジオボタンで何個（実際は1つのみ）チェックされたかの変数を定義
let radio_chk = $('.FormArea input[name="pg_lang"]:checked').length;
if (
$('.FormArea input[name="name"]').val() !== "" && //名前が入力された かつ
$('.FormArea input[name="age"]').val() !== "" && //年齢が入力された かつ
$('.FormArea select#pref').val() !== "" && //都道府県が選ばれた かつ
$('.FormArea input[name="email"]').val() !== "" && //メールアドレスが入力された かつ
checkbox_chk !== 0 && //チェックボックスが1つ以上（0個ではない）選ばれた かつ
radio_chk !== 0 //ラジオボタンが1つ以上（0個ではない）選ばれた
) {
//上記のif条件が全て満たされたら、CSSのbtn-activeの内容をbtnクラスの属性として適用させる
$submitBtn.attr('class','btn-active');
$submitBtn.prop('disabled', false);
} else {
$submitBtn.attr('class','btn');
$submitBtn.prop('disabled', true);
}
});
});
});
ifの条件として例えば、
('.FormArea input[name="name"]').val() !== ""
がありますが、これはname（名前）の入力の箇所が空でなかった場合ならばtrueとなります。同様の他の条件も同じです。ちなみに必須でないところは記載はしていません。
また、チェックボックスの箇所では
let checkbox_chk = $('.FormArea input[name="exam"]:checked').length;
と宣言していますが、:checked でチェックされた数を .length メソッドでカウントして、その値をcheckbox_chk 変数に代入しています。
その値が0ではない（つまり1つ以上チェックしている）場合はtrue としています。
これらの条件が全て満たされたら、以下の処理が実行されます。
$submitBtn.attr('class','btn-active');
$submitBtn.prop('disabled', false);
つまり、$submitBtn （以下のボタン）
<input type="submit" value="送信する" class="btn" disabled>
のclass="btn" をclass="btn-active" にして、ボタンの色を変えています。同時に、disabled をfalseで無効化にしているのでつまり有効化にしています。
動作確認
さて、実際に動作を確認してみると、ボタンが問題なく有効化され動いていることを確認できます。
※実際の動作はPHPコードで記載する必要があるので、その機能はまだとなります。
コードまとめ
.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/script_jQ.js"></script>
<title>フォームデザイン（バリデーションチェック）</title>
<style type="text/css">
.ly__wrapper {
margin: 0 auto;
max-width: 375px;
}
.EntryForm__area {
padding-top: 98px;
background-color: white;
border-radius: 15px;
max-width: 1140px;
height: 2500px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
}
.EntryForm__area .EntryForm__title {
color: #333;
font-family: Noto Sans JP;
font-size: 26px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-align: center;
margin-bottom: 48px;
}
.Form__Q {
display: flex;
flex-direction: column;
margin-bottom: 61px;
}
.Form__Q p {
margin-bottom: 10px;
}
.Form__Q label {
font-size: 16px;
}
/*必須に関するデザイン*/
.required::before {
content: "必須";
margin-right: 15px;
color: #FFF;
font-family: Noto Sans JP;
font-weight: 400;
line-height: 100%;
background: #339999;
width: auto;
height: 27px;
flex-shrink: 0;
padding-top: 4px;
padding-right: 5px;
padding-bottom: 4px;
padding-left: 5px;
}
/****************************************/
/*テキストフォーム・テキストエリアフォーム*/
/****************************************/
.FormArea input[type=text],
.FormArea input[type=mail],
.FormArea input[type=tel] {
padding-left: 14px;/*左ぴったりくっつかないように*/
border-radius: 4px;/*フォーム枠を丸くする*/
border: 1px solid #666;
background: rgba(217, 217, 217, 0);
height: 40px;
width: 95%;/*枠の幅*/
max-width: 300px;/*ただし幅は最大でも300px*/
font-family: Noto Sans JP;
font-size: 16px;
font-weight: 400;
line-height: 100%;
}
.FormArea input[type=number]{
padding-left: 14px;/*左ぴったりくっつかないように*/
border-radius: 4px;/*フォーム枠を丸くする*/
border: 1px solid #666;
background: rgba(217, 217, 217, 0);
height: 40px;/*枠の縦幅*/
width: 95%;/*枠の横幅*/
max-width: 150px;/*ただし幅は最大でも150px*/
font-family: Noto Sans JP;
font-size: 16px;
font-weight: 400;
line-height: 100%;
}
textarea {
padding-left: 14px;
padding-top:14px;
border-radius: 4px;
border: 1px solid #666;
background: rgba(217, 217, 217, 0);
height: 100px;
width: 95%;
min-width: 300px;
font-family: Noto Sans JP;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 100%;
}
/****************************************/
/*プルダウンメニュー**********************/
/****************************************/
.FormArea select {
margin-top:10px;
padding-left: 14px;
border-radius: 4px;
border: 1px solid #666;
background: rgba(217, 217, 217, 0);
height: 40px;
width: 30%;
min-width: 200px;
font-family: Noto Sans JP;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 16px */
cursor: pointer;
}
/****************************************/
/*チェックボックス************************/
/****************************************/
/*まずはデフォルトのチェックボックスの枠を消す*/
.FormArea input[type=checkbox] {
opacity: 0;
position: absolute;
}
/*ラベルの文字の設定*/
.FormArea input[type="checkbox"]+span {
display: block;
position: relative;
padding: 0.3em 0.3em 0.3em 40px;
line-height: 1;
cursor: pointer;
margin-bottom: 15px;
border:1px dotted #fff;
}
/*新たにチェックボックス枠を作成する*/
.FormArea input[type="checkbox"]+span:before {
position: absolute;
top: 0.1em;
left: 0;
content: "";
width: 25px;
height: 25px;
border: 1px solid #666;
background: #eee;
line-height: 1;
}
/*チェックボックス未チェック時*/
input[type="checkbox"]+span:after {
content: "";
display: none;
}
/*チェックボックスチェック時*/
input[type="checkbox"]:checked+span:after {
display: block;
position: absolute;
background-color:#339999;
top: 0.15em;
left: 0.45em;
width: 0.3em;
height: 0.9em;
content: "";
border-bottom: 3px solid white;
border-right: 3px solid white;
transform: rotate(45deg);
}
/*チェックボックスでチェックしたときにチェックボックスの背景の色を変える*/
.FormArea input[type="checkbox"]:checked+span:before {
background: #339999;
}
/*チェックボックスでチェックしたときにラベルの色を変える*/
.FormArea input[type="checkbox"]:checked+span{
color:#339999;
font-weight: 700;;
}
/*選択時にマウスをホバーさせた際に枠を出力*/
.FormArea input[type="checkbox"]+span:hover{
border:1px dotted #999;
}
/*Tabキーで選択できるようにする*/
.FormArea input[type="checkbox"]:focus+span{
border:1px dotted #999;
}
/****************************************/
/*チェックボックス************************/
/****************************************/
.FormArea input[type=radio] {
opacity: 0;
position: absolute;
}
/*クリック範囲を指定している*/
.FormArea input[type="radio"]+span {
display: block;/*縦表記するにはblock、横表記するにはinline-block*/
position: relative;
padding: 0.3em 0.3em 0.3em 40px;/*左から40pxの位置にラベルを置くため*/
line-height: 1;
cursor: pointer;
margin-bottom: 15px;
border:1px dotted #fff;
}
/*ラジオボタンの枠を描く*/
.FormArea input[type=radio] + span::before {
content: "";/*一旦空白を置く*/
position: absolute;
width: 26px;
height: 26px;
border-radius: 50%;
border:1px solid #ccc;
background-color: #eee;
box-sizing: border-box;
top: 2px;
left: 0px;
}
/*ラジオボタンをチェックした際の●を描く*/
.FormArea input[type=radio]:checked + span::after {
content: "";
position: absolute;
width: 26px;
height: 26px;
border-radius: 50%;
border: 9px solid #339999;
top: 2px;
left: 0px;
box-sizing: border-box;
}
/*マウスをラベルの載せたときに枠を表示*/
input[type="radio"]+span:hover{
border:1px dotted #999;
}
/*チェックした際の文字の色を変更*/
.FormArea input[type="radio"]:checked+span{
color:#339999;
font-weight: 700;;
}
/*tabキーで選択できるようにする*/
.FormArea input[type="radio"]:focus+span{
border:1px dotted #999;
}
/****************************************/
/*フォームボタン**************************/
/****************************************/
.Form__btn{
margin-top: 50px;
text-align: center;
}
/*submitボタンをデフォルト無効化*/
.btn {
background-color: #ccc;
width: 330px;
height: 84px;
border-radius: 42px;
border: 0;
color: white;
font-family: Noto Sans JP;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
position: relative;
}
.btn-active {
background-color: #005eb8;
width: 330px;
height: 84px;
border-radius: 42px;
border: 0;
color: white;
font-family: Noto Sans JP;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
position: relative;
position: relative;
cursor: pointer;
}
.btn-active:after {
position: absolute;
top: 0;
right: 44px;
bottom: 0;
margin: auto;
content: "";
display: block;
width: 16px;
height: 16px;
}
.btn-active a {
display: block;
line-height: 76px;
color: #fff;
font-family: Noto Sans JP;
font-size: 18px;
font-style: normal;
font-weight: 700;
transition: 0.5s;
}
/*PCでのデザイン*/
@media screen and (min-width:768px) {
.ly__wrapper {
margin: 0 auto;
max-width: 768px;
}
.Form__Q label {
font-size: 20px;
}
.FormArea input[type=text],
.FormArea input[type=mail],
.FormArea input[type=tel] {
max-width: 700px;/*ただし幅は最大でも300px*/
}
.FormArea input[type=number]{
max-width: 350px;/*ただし幅は最大でも300px*/
}
textarea {
height: 100px;
min-width: 700px;
}
}
</style>
</head>
<body>
<main>
<div class="ly__wrapper">
<div class="EntryForm__area">
<h1 class="EntryForm__title">フォームデザイン（バリデーションチェック）</h1>
<form class="FormArea" action="#"method="post" target="_self">
<div class="Form__Q">
<p><label for="name"class="required">お名前</label></p>
<div class="Form__input_area">
<input type="text" id="name" name="name" placeholder="例）田中太郎">
</div>
</div>
<div class="Form__Q">
<p><label for="age"class="required">ご年齢</label></p>
<div class="Form__input_area">
<input type="number" id="age" name="age" placeholder="例）26">
</div>
</div>
<div class="Form__Q">
<p><label for="pref" class="required">お住いの都道府県</label></p>
<select name="pref" id="pref">
<option value="" selected>都道府県</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
</div>
<div class="Form__Q">
<p><label for="tel">電話番号</label></p>
<div class="Form__input_area">
<input type="tel" id="tel" name="tel" placeholder="例）090-xxxx-xxxx">
</div>
</div>
<div class="Form__Q">
<p><label for="email" class="required">メールアドレス</label></p>
<div class="Form__input_area">
<input type="mail" id="email" name="email" placeholder="例）example@example.com">
</div>
</div>
<div class="Form__Q">
<p><label for="exam"class="required">今後受験予定のIPA試験を選択してください（複数選択可能）</label></p>
<div>
<label><input type="checkbox" id="exam01" name="exam" value="st"><span>ITストラテジスト試験</span></label>
<label><input type="checkbox" id="exam02" name="exam" value="sa"><span>システムアーキテクト試験</span></label>
<label><input type="checkbox" id="exam03" name="exam" value="pm"><span>プロジェクトマネージャ試験</span></label>
<label><input type="checkbox" id="exam04" name="exam" value="nw"><span>ネットワークスペシャリスト試験</span></label>
<label><input type="checkbox" id="exam05" name="exam" value="db"><span>データベーススペシャリスト試験</span></label>
<label><input type="checkbox" id="exam06" name="exam" value="es"><span>エンベデッドシステムスペシャリスト試験</span></label>
<label><input type="checkbox" id="exam07" name="exam" value="sm"><span>ITサービスマネージャ試験</span></label>
<label><input type="checkbox" id="exam08" name="exam" value="au"><span>システム監査技術者試験</span></label>
<label><input type="checkbox" id="exam09" name="exam" value="sc"><span>情報処理安全確保支援士試験</span></label>
<label><input type="checkbox" id="exam10" name="exam" value="ap"><span>応用情報技術者試験</span></label>
</div>
</div>
<div class="Form__Q">
<p><label for="pg_lang" class="required">興味のあるプログラミング言語を選択してください</label></p>
<div>
<label><input type="radio" id="pg_lang01" name="pg_lang" value="C"><span>C</span></label>
<label><input type="radio" id="pg_lang02" name="pg_lang" value="Java" ><span>Java</span></label>
<label><input type="radio" id="pg_lang03" name="pg_lang" value="Python"><span>Python</span></label>
<label><input type="radio" id="pg_lang04" name="pg_lang" value="Javascript" ><span>Javascript</span></label>
<label><input type="radio" id="pg_lang05" name="pg_lang" value="Visual Basic" ><span>Visual Basic</span></label>
<label><input type="radio" id="pg_lang06" name="pg_lang" value="PHP" ><span>PHP</span></label>
<label><input type="radio" id="pg_lang07" name="pg_lang" value="Cpp" ><span>C++</span></label>
</div>
</div>
<div class="Form__Q">
<p><label for="comment">なにか一言お願いします</label></p>
<div class="Form__input_area">
<textarea id="comment" name="comment" class="not_required_form"></textarea>
</div>
<div class="Form__btn">
※必須項目をすべて入力するとボタンが有効化されます<br>
<a href="#" >
<input type="submit" value="送信する" class="btn" disabled>
</a>
</div>
</form>
</div>
</div>
</main>
</body>
</html>
今回はボタンを有効化するといった方法でバリデーションチェックを行いましたが、他にも方法があります。次回はその他の方法も説明できればと思います。