フォームの値をチェックする方法

HTMLでチェックする

HTMLでは、フォームに入力した値をデフォルトでチェックできることがあります。

上記は、<input type="number">と記述しているだけですが、数字以外が入力できなくなったり、数字以外が入力されていてフォーカスを外すと値が消えたりします。

typeによって、入力できる値が変わります。詳細は、「input要素」をご参照ください。

なお、この方法はブラウザの対応状況によって、チェックされないことがあります。

入力を必須にする

以下のように、required属性を使うと、入力が必須になります。

<form>
<input type="text" name="input1" required>
<input type="submit" value="実行">
</form>

もし、値を入力せずに実行しても、「このフィールドを入力してください。」などと表示されて、実行できません。

required属性は、select要素(セレクトボックス)でも使えます。

JavaScriptを利用して値をチェックする

以下は、テキストボックスに入力した後、「実行」ボタンをクリックすると、半角英字が入力されていれば表示領域にその英字が表示されます。半角英字以外が入力されていると、「英字を入力してください」と表示されます。

JavaScriptを利用して値をチェックする時は、正規表現を使います。

<form name="form1">
<input type="text" name="input1">
<input type="button" id="test1" value="実行">
</form>
<p id="test2">表示領域</p>

<script>
function func1() {
  let y = document.form1.input1.value;
  const z = document.querySelector("#test2");
  if ( /[^a-z]/i.test(y) ) {
    z.textContent = "英字を入力してください";
  } else {
    z.textContent = y;
  }
}
const x = document.querySelector("#test1");
x.addEventListener("click",func1);
</script>

if文の中で使っているのが、正規表現です。正規表現を使うと、英字かどうかのチェックだけでなく、さまざまな入力チェックができます。詳細は、「正規表現の使い方」をご参照ください。

リアルタイムに値をチェックする

入力途中でリアルタイムにチェックして、半角英字以外が入力できないようにもできます。以下は、実行例です。

半角英字以外は、入力できないと思います。これは、以下のようにしています。

<input type="text" id="test1">

<script>
function func1() {
  x.value = x.value.replace(/[^a-z]+/ig,"");
}
const x = document.querySelector("#test1");
x.addEventListener("input",func1);
</script>

input要素で入力があるたびに、英字かを正規表現でチェックして、英字でなければ""で入力値を消しています。