jQueryでのリアルタイムの入力チェック【現役エンジニアが解説】

PROGRAM

今回は、jQueryでのリアルタイムの入力チェックについて、簡単に解説していきます。

リアルタイムの入力チェック

jQueryでもリアルタイムの入力チェックの実装はできます。

ただ、このあたりはSPAを想定しているVue.js等のフレームワークの方が優秀です。

jQueryでリアルタイムの入力チェックを自分で実装するとなると、少し煩雑になってきます。

HTML

HTMLのサンプルを以下に示します。

<form>
  <p>
    <label for="name">名前</label>
    <input id="name" type="text" name="name">
    <span id="name_error"></span>
  </p>
  
  <p>
    <label for="email">メール</label>
    <input id="email" type="email" name="email">
    <span id="email_error"></span>
  </p>
  
  <button id="btnSubmit" type="submit" disabled>送信</button>
</form>

エラー表示のため、各input要素の隣にspan要素を置いています。

また、入力チェックが通らないと送信できないよう、送信ボタンを初期値でdisabledにしています。

jQuery

jQueryの例を以下に示します。

var errors = {name:'', email:''};
$('#name').on('input',function(){
  if(!$(this).val()){
    errors.name = '名前が入力されていません。';
  } else if ($(this).val().length > 10) {
    errors.name = '名前は10文字以下で入力してください。';
  } else {
    delete errors.name;
  }
  $('#name_error').text(errors.name);
  setSubmitButton();
});
$('#email').on('input',function(){
  if(!$(this).val()){
    errors.email = 'メールアドレスが入力されていません。';
  } else if (!validEmail($(this).val())) {
    errors.email = '有効なメールアドレスを入力してください。';
  } else {
    delete errors.email;
  }
  $('#email_error').text(errors.email);
  setSubmitButton();
});
function setSubmitButton(){
  if (Object.keys(errors).length > 0) {
    $('#btnSubmit').prop('disabled', true);
  } else {
    $('#btnSubmit').prop('disabled', false);
  }
}
function validEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

ここでは各input要素のinputイベント時にチェックを行い、errorsオブジェクトでリアルタイムにエラーを管理しています。

各チェックイベントの最後で、errorsオブジェクトにエラーが存在するかしないかで送信ボタンのdisabledの設定を行っています。