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

PROGRAM

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

jQueryでの入力チェック

jQueryで入力チェックをされる場合も多いと思います。

その際には通常はプラグインを使われると考えられます。

しかし、今回はあえて、独自で実装する場合のサンプルを示したいと思います。

HTML

今回のHTMLの例は以下のとおりです。

<form>
  <p>
    <ul>
    </ul>
  </p>
  
  <p>
    <label for="name">名前</label>
    <input id="name" type="text" name="name">
  </p>
  
  <p>
    <label for="email">メール</label>
    <input id="email" type="email" name="email">
  </p>
  
  <button type="submit" onclick="checkForm(event);">送信</button>
</form>

基本的にはただフォームの各要素を並べているだけです。

送信ボタン押下時に入力チェックをするため、checkForm関数を呼んでいます。

jQuery

jQueryのサンプルは以下のとおりです。

function checkForm(e){
  var errors = [];
  var name = $('#name').val();
  var email = $('#email').val();
  
  $('ul').html('');
  
  if(!name){
    errors.push("名前が入力されていません。");
  } else if (name.length > 10) {
    errors.push("名前は10文字以下で入力してください。");
  }
  
  if(!email){
    errors.push("メールアドレスが入力されていません。");
  } else if (!validEmail(email)) {
    errors.push("有効なメールアドレスを入力してください。");
  }
  
  if (errors.length === 0) {
    return true;
  }
  
  $.each(errors, function(index, value){
     $('ul').append('<li>' + value + '</li>')
  });
  
  e.preventDefault();
}
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);
}

関数の先頭でエラー表示用のul要素の中身をリセットしています。

その後、チェックが通らない場合、ul要素に各エラーメッセージをli要素で追加し、EventのpreventDefaultメソッドでフォームを送信しないようにしています。