具有自定義自動填充功能的Parsley.js電話號碼驗證

Question

我正在使用Parsley表單驗證來處理表單，並且在一切順利之前遇到了最后一個問題。 這也是我第一次使用歐芹。

我有以下自定義腳本可以自動填充連字符和括號：

<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>

這可能無關緊要，但以防萬一，這是將Parsley綁定到表單的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

首先，您可能想使用input事件而不是change （在您的情況下是無用的）， keyup和paste 。

Parsley使用input事件，因此只要您的代碼在parsley的代碼之前運行（即，如果在Parsley之前綁定自動填充代碼），您就可以了。