Automatically format value before inserting into input with pattern

Question

I have a 'tel' type Input with a telephone pattern (Brazilian number system):

<input class="form-control" maxlength="15" pattern="[\(]?[0-9]{2}[\)]?[ ]?[0-9]{4,5}[-]?[0-9]{4}" type="tel" value="">

I'm also using jQuery Mask Plugin to automatically add the characters I want while typing and retrieve the value without the special characters to store on db. This is my MaskBehavior and options (for the library):

var PhoneMaskBehavior = function (val) {
    return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
},
    phoneOptions = {
        selectOnFocus: true,
        onKeyPress: function(val, e, field, options) {
            field.mask(PhoneMaskBehavior.apply({}, arguments), options);
        }
};

The problem is when I add a default value when loading the number from database. It fills without the special character and I the form doesn't allow submit, as the field is required and out of pattern.

This is what I get when loading a value from db directly in the input:

This is what I need to match the pattern (and what is inputed when I type the number manually, without loading with the input's value attribute):

Is there a way to automatically load a value and make it match the pattern by adding the special characters between the numbers, without parsing and treating the string?

Answer 1

Why not apply the mask on load?

 var PhoneMaskBehavior = function(val) { return val.replace(/\\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009'; }, phoneOptions = { selectOnFocus: true, onKeyPress: function(val, e, field, options) { field.mask(PhoneMaskBehavior.apply({}, arguments), options); } }; $(document).ready(function () { $('input[type=tel]').mask(PhoneMaskBehavior, phoneOptions) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script> <input value="51 3364 7979" type="tel" class="form-control" maxlength="15" pattern="[\\(]?[0-9]{2}[\\)]?[ ]?[0-9]{4,5}[-]?[0-9]{4}">