Parsley.js phone number validation with custom autofill

Question

I'm working on a form using Parsley form validation and am running into one last issue before it's all good to go. This is my first time using Parsley too.

I have this bit of custom script to autofill hyphens and parentheses:

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

When tabbing through the form fields though to double check that all works well and I get to the phone number field, the first parenthesis autofills, and then when I submit the form, Parsley accepts that as a valid phone number. Here is the 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>

And this may be unrelated but just in case, here is the js that is binding Parsley to the form:

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

Please let me know if you need a jsfiddle or anything to help out (I don't post here much!) Any ideas on how to prevent the form submit without a full valid phone number?

Answer 1

First, you probably want to use the input event instead of change (useless in your case btw), keyup and paste .

Parsley uses the input event, so as long as your code runs before parsley's (ie if you bind your autofill code before Parsley), you should be ok.