Não estou conseguindo aplicar uma máscara (CNPJ/CPF) dinâmica ao campo input de uma aplicação criada em Laravel 4.2, utilizando HTML5 e KnockoutJS.
Esta retornando a seguinte mensagem de erro no console do Chrome:
jquery-3.3.1.min.js:2 jQuery.Deferred exception: Unable to process binding "masked: function(){return maskCnpjCpf }"
Message: e.charAt is not a function TypeError: Unable to process binding "masked: function(){return maskCnpjCpf }"
Message: e.charAt is not a function
at Object.getMasked (http://localhost/assets/js/jquery-mask-1.14.15/jquery.mask.min.js:12:418)
at l.m.init (http://localhost/assets/js/jquery-mask-1.14.15/jquery.mask.min.js:15:387)
at new l (http://localhost/assets/js/jquery-mask-1.14.15/jquery.mask.min.js:15:418)
at HTMLInputElement.t (http://localhost/assets/js/jquery-mask-1.14.15/jquery.mask.min.js:17:223)
at Function.each (http://localhost/assets/js/jquery-3.3.1/jquery-3.3.1.min.js:2:2573)
at w.fn.init.each (http://localhost/assets/js/jquery-3.3.1/jquery-3.3.1.min.js:2:1240)
at w.fn.init.a.fn.mask (http://localhost/assets/js/jquery-mask-1.14.15/jquery.mask.min.js:17:249)
at init (http://localhost/assets/js/knockout_custom_bindings.js:13:24)
at http://localhost/assets/js/knockout-3.5.0/knockout-3.5.0.debug.js:3713:46
at Object.ignore (http://localhost/assets/js/knockout-3.5.0/knockout-3.5.0.debug.js:1560:33) undefined
w.Deferred.exceptionHook @ jquery-3.3.1.min.js:2
jquery-3.3.1.min.js:2
Uncaught TypeError: Unable to process binding "masked: function(){return maskCnpjCpf }"
Message: e.charAt is not a function
at Object.getMasked (jquery.mask.min.js:12)
at l.m.init (jquery.mask.min.js:15)
at new l (jquery.mask.min.js:15)
at HTMLInputElement.t (jquery.mask.min.js:17)
at Function.each (jquery-3.3.1.min.js:2)
at w.fn.init.each (jquery-3.3.1.min.js:2)
at w.fn.init.a.fn.mask (jquery.mask.min.js:17)
at init (knockout_custom_bindings.js:13)
at knockout-3.5.0.debug.js:3713
at Object.ignore (knockout-3.5.0.debug.js:1560)
Meu código HTML:
@extends('layouts.default')
@section('content')
<main role="main" class="container float-center p-4 col-sm-12" id="main-block">
<br>
<div class="jumbotron border border-primary">
<img class="mb-4" src="{{ asset('assets/img/logo-cnpjcpf-horizontal.png') }}" alt="">
<h3>CNPJ/CPF</h3>
<hr class="my-4">
{{ Form::open(['url' => '/cnpjcpf', 'class' => 'form-signin', 'name' => 'myForm', 'data-bind' => 'submit: enviarCnpjCpf', 'autocomplete' => 'off']) }}
<div class="form-group">
<div class="form-row col-sm-6">
<div class="form-check col-sm-3">
<input class="form-check-input" type="radio" name="companyIdType" id="companyIdTypeCnpj" value="cnpj" data-bind="checked: companyIdType">
<label class="form-check-label" for="companyIdTypeCnpj">CNPJ</label>
</div>
<div class="form-check col-sm-3">
<input class="form-check-input" type="radio" name="companyIdType" id="companyIdTypeCpf" value="cpf" data-bind="checked: companyIdType">
<label class="form-check-label" for="companyIdTypeCpf">CPF</label>
</div>
</div>
<small class="errors-messages" data-bind="validationMessage: companyIdType"></small>
</div>
<div class="form-row">
<div class="form-group col-sm-3">
<input name="cnpjCpf" type="text" id="cnpjCpf" class="form-control" placeholder="CNPJ ou CPF" autofocus data-bind="value: cnpjCpf, valueUpdate:'afterkeydown', mask: cnpjCpf, masked: maskCnpjCpf">
<small class="errors-messages" data-bind="validationMessage: cnpjCpf"></small>
</div>
</div>
<br>
{{ Form::close() }}
<hr class="my-4">
<a class="btn btn-primary btn-lg" role="button">Gravar e Avançar</a>
</div>
</main>
@stop
@section('content-scripts')
<script type='text/javascript' src="{{ asset('assets/js/cadcpf/cadastro-cpf.js') }}"></script>
@stop
Meu Javascript:
$(document).ready(function(){
function ConsumerVM() {
var self = this;
self.companyIdType = ko.observable('cnpj');
self.cnpjCpf = ko.observable();
self.maskCnpjCpf = ko.computed(function() {
if(self.companyIdType() == 'cpf')
return '999.999.999-99';
else
return '99.999.999/9999-99';
});
};
ko.validation.registerExtenders();
ko.validation.init({
insertMessages: false
}, true);
ko.validation.locale('pt-BR');
var consumerVM = new ConsumerVM;
ko.applyBindings(consumerVM, document.getElementById('main-block'));
});