jQuery

PowerTip

2013.5.16
jQueryjs

Powertip
Powertipを使って、フォームの入力補助テキストを表示する。
とても便利だったので、簡単にメモ。

１．下のようなHTMLフォームを用意する。

<form>
<label>Name</label>
<input type="text" name="name" class="name" id="field_01">
<label>Email</label>
<input type="text" name="email" class="email" id="field_02">
<label>Comment</label>
<textarea></textarea>
<input type="submit" value="submit">
</form>

２．powertipライブラリのjs, css ファイルを読みこませる。
ダウンロード ↓
http://stevenbenner.github.io/jquery-powertip/

<script type="text/javascript" src="assets/js/powertip/core.js"></script>
<script type="text/javascript" src="assets/js/powertip/csscoordinates.js"></script>
<script type="text/javascript" src="assets/js/powertip/displaycontroller.js"></script>
<script type="text/javascript" src="assets/js/powertip/placementcalculator.js"></script>
<script type="text/javascript" src="assets/js/powertip/tooltipcontroller.js"></script>
<script type="text/javascript" src="assets/js/powertip/utility.js"></script>
<script type="text/javascript" src="assets/js/powertip/powertip.js"></script>
<link rel="stylesheet" href="assets/css/powertip/jquery.powertip.css" >

３．新たにcontact.js等でファイルを作成し、powertip表示スクリプトを記述していく。

仕様は、テキストを、focus, keydown&keyup&keypress&change, blurのトリガーで表示させたい。
その都度バリデーションを行ない、フォーカスした時・入力テキストがValidの時・入力テキストがValidでないときそれぞれのテキストを定義する。

/* when focus */
defaultText = {};
defaultText["name"] = "お名前を入力して下さい";
defaultText["email"] = "お名前を入力して下さい";

/* when it is not valid */
errorText = {};
errorText["name"] = "全角で入力して下さい";
errorText["email"] = "メールアドレスの形式をご確認下さい";

/* when it is valid */
successText = {};
successText["name"] = "正しい形式です";
successText["email"] = "正しい形式です";

次に、バリデーションのための関数も定義。

/* filters */
// name
var filter_name = /^[ぁ-ン]+$/;
// email
var filter_email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

function chkField($this){
     var val = $this.val(),
          result = "";

     if($this.hasClass("name")){

          if( !filter_name.test(val)){
               result = 0;
          }else{
               result = 1;
          }

     }else if($this.hasClass("email")){
          if( !filter_email.test(val)){
               result = 0;
          }else{
               result = 1;
          }
     }
     return result;
}

そして、tooltip表示の関数を定義する。

function mytooltip(){

     /* set powerTip as manual */
     $("input").powerTip({ manual:true });

     $("input").each(function(){

          // define field id
          var fieldId = $(this).attr("id");

          /* focus */
          $("#" + fieldId).on("focus", function(){

               var val = $(this).val();

               // get tooltip text
               var fieldName = $(this).attr("name");
               var tooltipText = defaultText[fieldName];

               // set tooltip text
               $(this).data('powertip', tooltipText);
              
               // show tooltip
               $.powerTip.show(this);
          });

          /* keydown, keyup, keypress, change  */
          $("#" + fieldId).on("keydown keyup keypress change", function(){
                             
               // get tooltip text
               var fieldName = $(this).attr("name");

               // get field value
               var val = $(this).val();

               // validate value
               if(chkField($(this)) == 1){
                    //valid
                    var tooltipText = successText[fieldName];
               }else{
                    var tooltipText = errorText[fieldName];         
               }

               // change tooltip text
               $("#powerTip").text(tooltipText);
          });

          /* blur */
          $("#" + fieldId).on("blur", function(){
               $.powerTip.hide();
          });
     });

}

BLOG TOP