.checkValidity()

JavaScriptの.checkValidity()で必須項目を入力したら送信可能になるフォーム

2022年3月26日2022年4月9日 5分

BtoBのWebマーケティングで「資料請求」や「ユーザー登録」をコンバージョンとしている企業は多いと思います。

そんなコンバージョンに欠かせないフォームで、必須項目を入力したら送信可能にするスニペットをJavaScriptで作りました。

かかかず

いわゆるEFO（入力フォーム最適化）に使える小ネタスニペットです。

.checkValidity()
必須項目を入力したら送信可能になるフォームのサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.checkValidity()

JavaScriptの .checkValidity() は、該当のinput要素のバリデーション（認証とか確認のこと）を行い、その結果を返します。

var result = elements.checkValidity();

この記事のスニペットでは、このメソッドを使って、入力チェックを行います。

必須項目を入力したら送信可能になるフォームのサンプル

はじめにサンプルです。

全部で4つのテキストエリアがあります。この中の3つが「必須」になる箇所で、この3つに何かを入力することで下部にある「送信」ボタンが有効になります。

かかかず

このように、テキストエリアの入力有無で送信ボタンの有効・無効を制御します。

実装の手順と方法

スニペットのご紹介の前に、実装の手順と方法について簡単にご説明します。

HTMLを記述

はじめに、フォーム部分にあたるHTMLを記述します。

コードを表示

<form id="form">
<input type="text" name="001" class="text" size="30" placeholder="必須" maxlength="80" required/>
<input type="text" name="002" class="text" size="30" placeholder="必須" maxlength="80" required/>
<input type="text" name="003" class="text" size="30" maxlength="80">
<input type="text" name="004" class="text" size="30" placeholder="必須" maxlength="80" required/>
<button id="submit1" type="submit" name="my_submit" class="my_submit_btn" value="signup">送信</button>
</form>

フォームの項目は、用途によって異なると思いますが増やす場合は input タグの中に「required」を付ければ必須の入力項目に設定できます。

JavaScriptを記述

次に、JavaScritpのコードを記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

const form = document.getElementById("form")
const button = document.getElementById("submit1")
button.disabled = true;
button.classList.add('is-inactive');

form.addEventListener("input", update)
form.addEventListener("change", update)

function update() {
  const isRequired = form.checkValidity()

  if (isRequired) {
    button.disabled = false;
    button.classList.remove('is-inactive');
    button.classList.add('is-active');
    return
  }else {
    button.disabled = true;
    button.classList.remove('is-active');
    button.classList.add('is-inactive');
}
}

CSSを記述

最後にCSSを記述します。

コードを表示

/* 送信不可の時 */
button#submit1.is-inactive {
    background: #eeee;
    filter: drop-shadow(0px 0px 1px #ccc);
    pointer-events: none;
    color: #999;
}

/* 送信可能な時 */
button#submit1.is-active {
    margin: 0 auto;
    display: block;
    position: relative;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #f0db40;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
    letter-spacing: 0.04rem;
    pointer-events: auto;
}

コードはボタンの表示を切り替えて、かつクリックできないようにもするので記述しておきましょう。

かかかず

これで完了です。

ざっくりとしたコードの解説

コードはHTML・JavaScript・CSSの3種です。順に解説していきます。

HTML

HTMLは、form タグを親要素にして、その中に「type=”text”」の input タグと、送信の button ボタンを入れます。

<form id="form">
<input type="text" name="001" class="text" size="30" placeholder="必須" maxlength="80" required/>
<input type="text" name="002" class="text" size="30" placeholder="必須" maxlength="80" required/>
<input type="text" name="003" class="text" size="30" maxlength="80">
<input type="text" name="004" class="text" size="30" placeholder="必須" maxlength="80" required/>
<button id="submit1" type="submit" name="my_submit" class="my_submit_btn" value="signup">送信</button>
</form>

設置した input の中で、入力内容を必須項目にする input タグに「required」をつけます。ここで付けた「required」を持つ input タグが送信可能のトリガーになり、全て入力されるとはじめてボタンが送信可能になります。

JavaScript

JavaScriptは、はじめに「submit1」のid名を持つボタンを取得して、クリックなどを無効化する「disabled」とclass名の「is-inactive」を付けます。このclass名は、ボタンが無効化されているときに付与されるclass名です。

const form = document.getElementById("form")
const button = document.getElementById("submit1")
button.disabled = true;
button.classList.add('is-inactive');

form.addEventListener("input", update)
form.addEventListener("change", update)

function update() {
  const isRequired = form.checkValidity()

  if (isRequired) {
    button.disabled = false;
    button.classList.remove('is-inactive');
    button.classList.add('is-active');
    return
  }else {
    button.disabled = true;
    button.classList.remove('is-active');
    button.classList.add('is-inactive');
}
}

その後、フォームがトリガーになる.addEventListener の「input」と「update」のイベントで、エラーのチェックを行う .checkValidity() の関数が実行されます。

関数が実行されると、if の条件分岐で処理が分岐して送信ボタンが選択できるようになります。

CSS

CSSは、ボタンの送信可能時・送信ができない時の2種類のみです。

/* 送信不可の時 */
button#submit1.is-inactive {
    background: #eeee;
    filter: drop-shadow(0px 0px 1px #ccc);
    pointer-events: none;
    color: #999;
}

/* 送信可能な時 */
button#submit1.is-active {
    margin: 0 auto;
    display: block;
    position: relative;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #f0db40;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
    letter-spacing: 0.04rem;
    pointer-events: auto;
}

フォームのテキストエリアの見た目は特に何もしていないので、任意のものを記述してください。