JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.checkValidity()

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

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

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

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

かかかず
かかかず

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

.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;
}

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

さいごに

個人的にもBtoBマーケでフォームはかなりよく使うので、バリテーションチェックにあたるこのスニペットを参考にしてみてください。