入力フォームの文字数チェック・判定【JavaScript】

2020年10月1日

この記事ではinput type="text"のフォームの入力文字の表示と入力文字数を判定する方法を紹介していきます。

入力文字数の判定

基本形

まずは「フォームの入力内容を表示する」というコードを作っていきましょう。

ここでは、onchangeで「入力欄の内容を変更した時」にイベントが発火するようにしています。

function checkValue() {
  var ipt_form = document.getElementById('form');
  var ipt_value = ipt_form.value;
  document.getElementById('opt_value').innerHTML = ipt_value;
}

<input type="text" id="form" onchange="checkValue()">
<div>入力内容：<span id="opt_value"></span></div>

上記のコードを実装したデモがこちらです↓

入力した内容が表示されます。

文字数をチェックするif文を追加

上記のコードに文字数を判定する条件分岐を追加しましょう。

5文字未満のときに「5文字以上入力してください。」とエラーが表示され、入力内容が空になります。

function checkValue() {
  var ipt_form = document.getElementById('form');
  var ipt_value = ipt_form.value;
  document.getElementById('opt_value').innerHTML = ipt_value;
  
  if( ipt_value.length < 5 ) {
  	document.getElementById('less').style.display = 'block';
    ipt_form.value = '';
  } else {
   	document.getElementById('less').style.display = 'none';
  }
}

<input type="text" id="form" onchange="checkValue()">
<div>入力内容：<span id="opt_value"></span></div>
<p id="less">5文字以上入力してください。</p>

#less {
  display: none;
}

上記を実装したデモがこちらです↓

このコードでは、エラー文はdisplayのblock/noneで表示・非表示を切り替えています。

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。