CODEWITHSUNDEEP
javascriptjqueryhtmlformsparsley.js
J. Jackson
J. Jackson

Reputation: 3744

Parsley.js phone number validation with custom autofill

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?

Upvotes: 0

Views: 1868

Answers (1)

Marc-Andr&#233; Lafortune
Marc-Andr&#233; Lafortune

Reputation: 79552

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

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

Upvotes: 0

Related Questions