フォーム入力で必須ではないが入力値を制限したいケース

フォームの入力チェックにjQueryなど、javascriptで処理することが有りますが、これが必須有りきじゃないケースが有ります。例えばデータベースにインサートするフォームで、数字のみに制限したいけど、必須じゃないので入力チェックを組み込めないなんて事は割と有ります。せっかくその場でチェックしているのに、そこだけPOST後にチェックとか微妙ですよね。

で、こんな事をやります。

$(function() {
  $(document).on('blur','input',function(){
    var valid = $(this).data("valid");
      if(valid == undefined) return;
    var val = $(this).val();
      if(!val) return;
    
    var txt = '必須では有りませんが';
    switch( valid ){
      case 'number':
        var chk = $.isNumeric(val);
        if(chk == false){
          $(this).next('.slvalid').remove();
          $(this).val( $(this).data('def') );
          $(this).after(txt+'数値以外入力しないで下さい</div>');
        }else{
          $(this).next('.slvalid').slideUp();
        }
      break;
      case 'email':
        if(val.match("^[0-9A-Za-z._\-]+@[0-9A-Za-z.\-]+$")){
          $(this).next('.slvalid').slideUp();
        }else{
          $(this).next('.slvalid').remove();
          $(this).val( $(this).data('def') );
          $(this).after(txt+'メールアドレス形式で入力して下さい</div>');
        }
      break;
    }
  });
  
  function remove(){
    setTimeout(function(){ 
      $(".slvalid").fadeOut(300);
    },3000);
  }
});

フォームは以下のような形で書きます。

<input type="text" id="name" data-valid="{type}" data-def="{val}" value="" />

これは数字とメールアドレスだけを例にしていますが、正規表現で色々な形式を設定すれば汎用的に使えます。

やっている事は単純で、フォームからフォーカスが外れたら入力チェックを行い、数字じゃなければvalueを元の値に書き変えてメッセージを出すってだけです。まぁこれにPOST停止を組み込めば、普通の入力チェックjavascriptになっちゃうのですが、そこはご愛嬌。