問い合わせや会員登録、資料請求などなどWebサイトで使われているフォーム。
そんなフォームで規約を同意してもらいたい場合に、「規約同意」のチェックが入ってはじめて送信が可能になるフォームを、JavaScriptを使い作ってみました。
.addEventListenerのchange
JavaScriptの.addEventListenerは、ターゲットに特定のイベントが発生する度に関数です。
.addEventListener(type, listener);この記事では、イベントの種類を表す文字列は change です。change イベントは、フォームなど操作によって値が変更されたときに発生するイベントです。
チェックが付いたら有効になるボタンのサンプル
サンプルは全体感が分かるよう「会員登録」のフォームです。実際に何か登録できるものではない、モックです。
各項目の入力後、規約同意のチェックボックスでボタンが送信できるようになります。
サンプルのコード
コードは、HTML・JavaScript・CSSの3種です。順に解説していきます。
HTML
HTMLは、「ユーザID」「パスワード」「メールアドレス」の input 入力フィールドに、「利用規約に同意」のckeckbox 。そして、「登録ボタン」の5つです。
<div class="loginForm">
<form class="my_form" name="my_signup_form" id="my_signup_form" action="" method="post">
<div class="formUsername">
<label for="signup_user_name">ユーザID</label>
<input id="signup_user_name" name="user_name" type="text" required="">
</div>
<div class="formUsername">
<label for="signup_password">パスワード</label>
<input id="signup_password" placeholder="半角英数字8文字以上" minlength="8" name="user_pass" type="password" required="">
</div>
<div class="formPassword">
<label for="signup_email">メールアドレス</label>
<input id="signup_email" name="user_email" type="email" required="">
</div>
<div class="contactAgree">
<p>利用規約に同意の上、ご登録ください。</p>
<input type="checkbox" id="termCheck" name="agree" value="agreement">
<label for="termCheck" class="checkagree">利用規約に同意する</label>
</div>
<button id="submitButton" type="submit" name="my_submit" class="my_submit_btn" value="signup">メンバー登録</button>
</form>
</div>チェックボックスのチェックの有無が、後述の .addEventListenerの change に連動して、button タグのclass名が変更になり、送信できるようになります。
JavaScript
JavaScriptの .addEventListener は2段階になっていて、まずはじめにHTMLの読み込みと解析が完了した時点で発動するイベントと、チェックボックスの状態が変わった時に発動するイベントの2種です。
// 同意でログインボタンON
document.addEventListener('DOMContentLoaded', function(event) {
const targetButton = document.getElementById('submitButton');
const triggerCheckbox = document.querySelector('input[name="agree"]');
targetButton.disabled = true;
targetButton.classList.add('is-inactive');
triggerCheckbox.addEventListener('change', function() {
if (this.checked) {
targetButton.disabled = false;
targetButton.classList.remove('is-inactive');
targetButton.classList.add('is-active');
} else {
targetButton.disabled = true;
targetButton.classList.remove('is-active');
targetButton.classList.add('is-inactive');
}
}, false);
}, false);DOMContentLoaded のイベントでは、button タグに disabled 属性と、is-inactive のclass名が付きます。そして、チェックボックスで発動するchange では、disabled 属性とclass名を変更する形で、表示が切り替わります。
CSS
CSSは、フォームの項目数字に応じた量です。
個人的に、標準ままのチェックボックスは小さく視認しづらいUIです。ので、class名「checkagree」をチェックボックスに付け、大きさも大きくし、チェックが入ると擬似要素で色味をつけて表示させています。
.loginForm {
width: 100%;
max-width: 600px;
margin: 0 auto;
background: #FFF;
padding: 25px 30px 25px;
border-radius: 3px;
box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 1px 1px 0 rgb(0 0 0 / 11%);
display: flex;
flex-direction: column;
}
.loginForm img {
display: block;
width: 250px;
margin: 10px auto 20px;
}
.formUsername {
margin-bottom: 20px;
}
.formPassword {
margin-bottom: 30px;
}
.formUsername input, .formPassword input {
background: #FFF;
border: solid 1px #aaa;
}
.loginForm button {
width: 100%;
display: block;
background: #6bb6ff;
line-height: 35px;
border: none;
color: #FFF;
transition: 0.3s ease-in-out;
font-weight: 600;
overflow: hidden;
position: relative;
}
.loginForm button:hover {
opacity: 0.95;
}
.loginForm button:before{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -100%;
background-image: linear-gradient(
130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 55%);
-webkit-transition: 0.5s;
transition: 0.6s;
}
.loginForm button:hover:before {
left: 100%;
}
button#submitButton.is-inactive {
background: #ddd;
pointer-events: none;
}
.contactAgree {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
margin-bottom: 10px;
}
input[type=checkbox] {
display: none;
}
.checkagree {
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 5px 32px;
position: relative;
width: auto;
}
.checkagree::before {
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
content: '';
display: block;
height: 18px;
left: 5px;
margin-top: -10px;
position: absolute;
top: 50%;
width: 18px;
}
.checkagree::after {
border-right: 6px solid #f0db40;
border-bottom: 3px solid #f0db40;
content: '';
display: block;
height: 20px;
left: 7px;
margin-top: -18px;
opacity: 0;
position: absolute;
top: 50%;
transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1);
transition: transform .2s ease-in-out, opacity .2s ease-in-out;
width: 9px;
}
.contactAgree p {
margin: 0;
font-size: 0.8rem;
}
input[type=checkbox]:checked + .checkagree::before {
border-color: #666;
}
input[type=checkbox]:checked + .checkagree::after {
opacity: 1;
transform: rotate(45deg) scale3d(1,1,1);
}
.memberResist {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40px;
}
.memberResist p {
margin: 0;
}
かかかず
チェックボックスの見た目を変えるだけで、だいぶ印象が変わります。
