jQueryを利用したバリデーションチェック

0 件のコメント




jQueryを利用したバリデーションチェック(。・ω・。)
目的
  • 入力項目に対し、jQueryを利用して、送信ボタン押下前にリアルタイムにバリデーチョンチェックを実施する。
  • DEMO PAGE
仕様
  • フォーカスアウト時にリアルタイムにバリデーションチェックを行う。
  • エラーがある時は、送信ボタンを押下しても送信しない。
ソースコード
$(document).ready(function(){
  /* ◯各々にフォーカスアウトしたときに実行 */
  $(":text,textarea,:password").blur(function(){
   /* ◯NULLチェック */
   if($(this).attr('validate').match("required")){
    if($(this).val() == ""){
     if($(this).next().text() === ""){
      $(this).after("<div class='errorMsg'>入力必須項目です</div>");
     }
     return true;
     /* return trueは、jsでいうcontinueと同じ。ちなみにbreakはreturn false */
    }else{
     if($(this).next().text() !== "") $(this).next().remove();
    }
   }
   /* ◯半角数字チェック */ 
   if($(this).attr('validate').match("numeric")){
    /* ◯半角数字のみでなかった場合 */
    if(!$(this).val().match(/^[0-9]+$/g)){
     /* ◯エラーが表示されていないときのみエラーを表示 */
     if($(this).next().text() === ""){
      $(this).after("<div class='errorMsg'>半角数字のみで入力してください</div>");
     }
     return true;
    }else{
     /* ◯エラーがなくなったらエラーのdivを削除 */
     if($(this).next().text() !== "") $(this).next().remove();
    }
   }
   /* ◯半角英字チェック */
   if($(this).attr('validate').match("alpha")){
    if(!$(this).val().match(/^[a-z,A-Z]+$/g)){
     if($(this).next().text() === ""){
      $(this).after("<div class='errorMsg'>半角英字のみで入力してください</div>");
     }
     return true;
    }else{
     if($(this).next().text() !== "") $(this).next().remove();
    }
   }
   /* ◯半角英数チェック */
   if($(this).attr('validate').match("alpNumeric")){
    if(!$(this).val().match(/^[a-zA-Z0-9]+$/g)){
     if($(this).next().text() === ""){
      $(this).after("<div class='errorMsg'>半角英数字のみで入力してください</div>");
     }
     return true;
    }else{
     if($(this).next().text() !== "") $(this).next().remove();
    }
   }
   /* ◯全角カタカナチェック */
   if($(this).attr('validate').match("katakana")){
    if(!$(this).val().match(/^[ァ-ン]+$/g)){
     if($(this).next().text() === ""){
      $(this).after("<div class='errorMsg'>全角カタカナで入力してください</div>");
     }
     return true;
    }else{
     if($(this).next().text() !== "") $(this).next().remove();
    }
   }
   /* ◯メールアドレスチェック */
   if($(this).attr('validate').match("mailadd")){
    if(!$(this).val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/g)){
     if($(this).next().text() === ""){
      $(this).after("<div class='errorMsg'>メールアドレスの形式で入力してください</div>");
     }
     return true;
    }else{
     if($(this).next().text() !== "") $(this).next().remove();
    }
   }
   /* ◯禁則文字チェック */
   if($(this).attr('validate').match("illegal")){
    if($(this).val().match(/['\"\\|\$+\*={}<>~^`:;.%]+/g)){
     if($(this).next().text() === ""){
      $(this).after("<div class='errorMsg'>入力に使用できない文字が含まれています</div>");
     }
     return true;
    }else{
     if($(this).next().text() !== "") $(this).next().remove();
    }
   }
  });
  
  /* 送信ボタンを押したとき */
  $('form').submit(function(e){
   /* ◯エラーが表示されていたら送信しない */
   if($('div').hasClass('errorMsg') == true){
    e.preventDefault();
    alert('入力エラーがが存在しています。');
   }
  });
 });
<input type="text" name="name" validate="required illegal" />

input項目にvalidate属性を設け、そこにチェックしたい項目をスペース区切りで記載して下さい。




0 件のコメント :

コメントを投稿