JavaScriptでフォームのボタンを無効にする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでフォームのボタンを無効にする方法について現役エンジニアが解説しています。inputタグでtypeプロパティをsubmitに設定した場合とbuttonタグにdisableを設定します。jQueryではpropメソッドで簡単に無効にすることが出来ます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでフォームのボタンを無効にする方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでフォームのボタンを無効にする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLのボタン要素とは

ボタン要素は、ボタンを作成するHTMLの要素です。

inputタグでtypeプロパティをsubmitに設定した場合とbuttonタグの機能は基本的に一緒ですが、画像やテキストをinputタグで作成する場合より柔軟に指定できます。

formタグの中で、送信ボタンとして使用するケースが多いです。

代表的なプロパティとして、ボタンの種類を決定するtypeプロパティ/名前を指定するnameプロパティ/値を指定するvalueプロパティ/操作を無効にするdisabledがあります。

特にユーザーに正常でない値である時に送信できないように、buttonのdisabledプロパティはよく使用するので操作の方法をマスターしておきましょう。
 

JavaScriptでフォームのボタンを無効にする方法

JavaScriptでフォームのボタンを無効にするには、buttonタグをgetElementByIdやquerySelectorで取得しdisabledをtrueに変更する必要があります。

以下のコードで無効にできます。
 

const button = document.querySelector("#ボタンのID");
// または
// const button = document.getElementById("ボタンのID");
button.disabled = true

 

jQueryでは、propメソッドでプロパティの値を簡単に操作できます。

Disabledプロパティは以下のように設定できます。
 

$('#buttonのid').prop('disabled',true);

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際に書いてみましょう。

今回は、簡単なメールアドレスの入力フォームを作成して正規表現でフォームをチェックして正常なメールの場合のみ送信ボタンが使えるようにします。

メールアドレスの簡単なチェックは以下の正規表現で行います。
大文字小文字は区別せず、半角英数字と記号で構成されて@.が含まれているかをチェックします。
 

/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i

 
それでは書いていきます。

まずは以下のようにフォームを用意します。
 

<form>
<input type="text" id="text-field" />
<button type="submit" id="submit-btn">送信</button>
<p id="helper-text" style="color: red;"></p>
</form>

 

そうしたら、inputタグ/buttonタグ/pタグを取得し、keyupイベント(キーボードから指が離れた時に発火するイベント)ごとにinputの内容をチェックしbuttonのdisabledプロパティの書き換え、pタグのテキストの付け替えを行います。
 

// 各種タグの取得
const input = document.querySelector("#text-field");
const button = document.querySelector("#submit-btn");
const p = document.querySelector("#helper-text");
// emailの正規表現
const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;

// keyupイベントを拾う
input.addEventListener("keyup", () => {
 // inputの中身を正規表現でチェック
 if (emailRegex.test(input.value)) {
   // 成功した場合は、disabledをfalseに
   button.disabled = false;
   p.textContent = "";
 } else {
   // 失敗した場合は、disabledをtrueに
   button.disabled = true;
   p.textContent = "Invalid Email format";
 }
});

 
これで入力のたびに、入力内容をチェックし送信ボタンの操作の有効・無効を変更できます。

以上で解説を終わります。
 

筆者プロフィール

この記事を監修してくれた方

メンター金成さん。
2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。