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

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

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

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

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

 

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] コーディングで副業する方法とは

実際に書いてみよう

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

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

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

/^[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・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。