Parsley.jsカスタムオートフィルによる電話番号の確認

Question

私はパーズリーフォームのバリデーションを使用してフォームを作成しています。これは初めてのパースリーです。

私は、カスタムスクリプトのこのビットはハイフンや括弧を自動入力する必要があります。

<script type="text/javascript"> 
     $("#inf_field_Phone1").on("change keyup paste", function() { 
      var output; 
      var input = $("#inf_field_Phone1").val(); 
      input = input.replace(/[^0-9]/g, ''); 
      var area = input.substr(0, 3); 
      var pre = input.substr(3, 3); 
      var tel = input.substr(6, 4); 
      if (area.length < 3) { 
        output = "(" + area; 
      } else if (area.length == 3 && pre.length < 3) { 
        output = "(" + area + ")" + " " + pre; 
      } else if (area.length == 3 && pre.length == 3) { 
        output = "(" + area + ")" + " " + pre + "-" + tel; 
      } 
      $("#inf_field_Phone1").val(output); 
    }); 
    </script> 

、最初の括弧すべてがうまく機能していることを確認倍増し、私は電話番号フィールドを取得するのに、フォームのフィールドをタブ移動私がフォームを提出すると、Parsleyはこれを有効な電話番号として受け取ります。ここではHTMLは次のとおりです。

<form accept-charset="UTF-8" id='become-partner-form' method="POST" name='Form'>  
    <div class="col-md-6"> 
     <input type="tel" class="form-control tc-custom-focus" id="inf_field_Phone1" name="inf_field_Phone1" placeholder="Phone*" data-parsley-trigger='change' data-parsley-required> 
</div> 

そして、これは無関係であるが、念のために、こちらのフォームにパセリを結合されたJSある可能性があります

<script type="text/javascript"> 
     $(function() { 
      $('#become-partner-form').parsley().on('field:validated', function() { 

       var ok = $('.parsley-error').length === 0; 
       $('.bs-callout-warning').toggleClass('invisible', ok); 

      }) 
     }); 
    </script> 

あなたはjsfiddleが必要な場合は私に知らせてください何か助けてください（私はここにあまり投稿しません！） 完全な有効な電話番号なしでフォーム提出を防ぐ方法に関するアイデアはありますか？

Answer 1

最初にchange（あなたのケースでは役に立たない）keyupとpasteの代わりにinputイベントを使用します。

パーズリーはinputイベントを使用するため、パーズリーの前にコードが実行される限り（つまり、パーズリーの前にオートフィルコードをバインドする場合）、あなたは大丈夫です。