1

I have this field (postcode or zipcode)

<input class="input-text col s12 zipcode" type="text" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
attr: {
    name: inputName,
    placeholder: placeholder,
    'aria-describedby': getDescriptionId(),
    'aria-required': required,
    'aria-invalid': error() ? true : 'false',
    id: uid,
    disabled: disabled
}" name="postcode" aria-required="true" aria-invalid="false" id="zipcode" onKeyPress="MascaraCep(co-shipping-form.zipcode)">

CEP

wich has onKeyPress="MascaraCep(co-shipping-form.zipcode) event

and my masks.js:

/** Application */

require(['jquery'], function($) {

    console.log("Masks is loaded (mage2/m2materialize/web/js/masks.js)");

    /* Start */

    $(document).ready(function(){

        /* Start */


        //adiciona mascara de cep
        function MascaraCep(cep){
                        if(mascaraInteiro(cep)==false){
                        event.returnValue = false;
                }       
                return formataCampo(cep, '00.000-000', event);
        }

        //valida numero inteiro com mascara
        function mascaraInteiro(){
                if (event.keyCode < 48 || event.keyCode > 57){
                        event.returnValue = false;
                        return false;
                }
                return true;
        }

        //formata de forma generica os campos
        function formataCampo(campo, Mascara, evento) { 
                var boleanoMascara; 

                var Digitato = evento.keyCode;
                exp = /\:|\-|\.|\/|\(|\)| /g
                campoSoNumeros = campo.value.toString().replace( exp, "" ); 

                var posicaoCampo = 0;    
                var NovoValorCampo="";
                var TamanhoMascara = campoSoNumeros.length;; 

                if (Digitato != 8) { // backspace 
                        for(i=0; i<= TamanhoMascara; i++) { 
                                boleanoMascara  = ((Mascara.charAt(i) == ":") || (Mascara.charAt(i) == "-") || (Mascara.charAt(i) == ".") || (Mascara.charAt(i) == "/")) 
                                boleanoMascara  = boleanoMascara || ((Mascara.charAt(i) == "(") 
                                                                        || (Mascara.charAt(i) == ")") || (Mascara.charAt(i) == " ")) 
                                if (boleanoMascara) { 
                                        NovoValorCampo += Mascara.charAt(i); 
                                          TamanhoMascara++;
                                }else { 
                                        NovoValorCampo += campoSoNumeros.charAt(posicaoCampo); 
                                        posicaoCampo++; 
                                  }              
                          }      
                        campo.value = NovoValorCampo;
                          return true; 
                }else { 
                        return true; 
                }
        }


    });

});

but my console display:

Masks is loaded (mage2/m2materialize/web/js/masks.js)
Uncaught ReferenceError: MascaraCep is not defined
Improve this question
1

1 Answer 1

Reset to default
0

I found a solution, for checkout inputs I am using: packagist.org/packages/piszczek/magento2-inputmask And for customer shipping address I can use jquery to add mask

checkout_index_index.xml

<item name="postcode" xsi:type="array">
<!-- post-code field has custom UI component -->
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="validation" xsi:type="array">
    <item name="required-entry" xsi:type="string">true</item>
    <label translate="true">Zip Code</label>
    <placeholder>00.000-000</placeholder>
</item>
<item name="validation" xsi:type="array">
    <item name="validate-zip-br" xsi:type="string">true</item>
</item>
<item name="config" xsi:type="array">
    <!-- Assigning a new template -->
    <item name="inputMask" xsi:type="array">
        <!-- pass your simple mask here-->
        <item name="mask" xsi:type="string">00.000-000</item>
    </item>
    <item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/zipcode</item>
</item>
<item name="sortOrder" xsi:type="string">65</item>

adde Magento_Customer/templates/address/edit.phtml:

<script>
require([
    "jquery",
    "mage/mage"
], function($){

    $('#zip').keypress(function(event){
        var input = $('#zip');
        MascaraCep(input, event);
    });

    $('#zip').on('blur', function(event){
        var input = $('#zip');
        completeAdress(input, event);
    });

    var completeAdress = function(code) {

            //Nova variável "cep" somente com dígitos.
            var cep = $("#zip").val().replace(/\D/g, '');

            //Verifica se campo cep possui valor informado.
            if (cep != "") {

                //Expressão regular para validar o CEP.
                var validacep = /^[0-9]{8}$/;

                //Valida o formato do CEP.
                if(validacep.test(cep)) {

                    //Consulta o webservice viacep.com.br/
                    $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) {

                        if (!("erro" in dados)) {
                            //Atualiza os campos com os valores da consulta.
                            $("#street_1").val(dados.logradouro);

                            $("#street_4").val(dados.bairro);

                            $("#city").val(dados.localidade);

                            $("#street_3").val(dados.complemento);

                            var uf = dados.uf;

                            switch(uf) {
                                case "AC":
                                    uf = "Acre";
                                    break;
                                case "AL":
                                    uf = "Alagoas";
                                    break;
                                case "AP":
                                    uf = "Amapá";
                                    break;
                                case "AM":
                                    uf = "Amazonas";
                                    break;
                                case "BA":
                                    uf = "Bahia";
                                    break;
                                case "CE":
                                    uf = "Ceará";
                                    break;
                                case "ES":
                                    uf = "Espírito Santo";
                                    break;
                                case "GO":
                                    uf = "Goiás";
                                    break;
                                case "MA":
                                    uf = "Maranhão";
                                    break;
                                case "MG":
                                    uf = "Mato Grosso";
                                    break;
                                case "MS":
                                    uf = "Mato Grosso do Sul";
                                    break;
                                case "MT":
                                    uf = "Minas Gerais";
                                    break;
                                case "PA":
                                    uf = "Pará";
                                    break;
                                case "PB":
                                    uf = "Paraíba";
                                    break;
                                case "PR":
                                    uf = "Paraná";
                                    break;
                                case "PE":
                                    uf = "Pernambuco";
                                    break;
                                case "PI":
                                    uf = "Piauí";
                                    break;
                                case "RJ":
                                    uf = "Rio de Janeiro";
                                    break;
                                case "RN":
                                    uf = "Rio Grande do Norte";
                                    break;
                                case "RS":
                                    uf = "Rio Grande do Sul";
                                    break;
                                case "RO":
                                    uf = "Rondônia";
                                    break;
                                case "RR":
                                    uf = "Roraima";
                                    break;
                                case "SC":
                                    uf = "Santa Catarina";
                                    break;
                                case "SP":
                                    uf = "São Paulo";
                                    break;
                                case "SE":
                                    uf = "Sergipe";
                                    break;
                                case "TO":
                                    uf = "Tocantins";
                                    break;
                                case "DF":
                                    uf = "Distrito";
                                    break;
                                default:
                                    uf = false;
                            }

                            if(uf){
                                $("#region_id > option:contains("+uf+")").attr("selected","selected");
                            }

                        } //end if.
                        else {
                            //CEP pesquisado não foi encontrado.
                            // limpa_formulário_cep();
                            alert("CEP não encontrado.");
                        }
                    });
                } //end if.
                else {
                    //cep é inválido.
                    // limpa_formulário_cep();
                    alert("Formato de CEP inválido.");
                }
            } //end if.
            else {
                //cep sem valor, limpa formulário.
                // limpa_formulário_cep();
            }

        }

    function MascaraCNPJ(cnpj){
            if(mascaraInteiro(cnpj)==false){
                    event.returnValue = false;
            }       
            return formataCampo(cnpj, '00.000.000/0000-00', event);
    }

    //adiciona mascara de cep
    function MascaraCep(cep, event){
        return formataCampo(cep, '00.000-000', event);
    }

    //adiciona mascara ao telefone
    function MascaraTelefone(tel){  
            if(mascaraInteiro(tel)==false){
                    event.returnValue = false;
            }       
            return formataCampo(tel, '(00) 0000-0000', event);
    }

    //adiciona mascara ao telefone
    function MascaraCelular(tel){  
            if(mascaraInteiro(tel)==false){
                    event.returnValue = false;
            }       
            return formataCampo(tel, '(00) 00000-0000', event);
    }

    //adiciona mascara ao CPF
    function MascaraCPF(cpf){
            if(mascaraInteiro(cpf)==false){
                    event.returnValue = false;
            }       
            return formataCampo(cpf, '000.000.000-00', event);
    }

    //valida telefone
    function ValidaTelefone(tel){
            exp = /\(\d{2}\)\ \d{5}\-\d{4}/
            if(!exp.test(tel.value))
                    alert('Numero de Telefone Invalido!');
    }

    //valida CEP
    function ValidaCep(cep){
            exp = /\d{2}\.\d{3}\-\d{3}/
            if(!exp.test(cep.value))
                    alert('Numero de Cep Invalido!');               
    }

    //valida data
    function ValidaData(data){
            exp = /\d{2}\/\d{2}\/\d{4}/
            if(!exp.test(data.value))
                    alert('Data Invalida!');                        
    }

    //valida o CPF digitado
    function ValidarCPF(Objcpf){
            var cpf = Objcpf.value;
            exp = /\.|\-/g
            cpf = cpf.toString().replace( exp, "" ); 
            var digitoDigitado = eval(cpf.charAt(9)+cpf.charAt(10));
            var soma1=0, soma2=0;
            var vlr =11;

            for(i=0;i<9;i++){
                    soma1+=eval(cpf.charAt(i)*(vlr-1));
                    soma2+=eval(cpf.charAt(i)*vlr);
                    vlr--;
            }       
            soma1 = (((soma1*10)%11)==10 ? 0:((soma1*10)%11));
            soma2=(((soma2+(2*soma1))*10)%11);

            var digitoGerado=(soma1*10)+soma2;
            if(digitoGerado!=digitoDigitado)        
                    alert('CPF Invalido!');         
    }

    //valida numero inteiro com mascara
    function mascaraInteiro(event){
            if (event.keyCode < 48 || event.keyCode > 57){
                    event.returnValue = false;
                    return false;
            }
            return true;
    }

    //valida o CNPJ digitado
    function ValidarCNPJ(ObjCnpj){
            var cnpj = ObjCnpj.value;
            var valida = new Array(6,5,4,3,2,9,8,7,6,5,4,3,2);
            var dig1= new Number;
            var dig2= new Number;

            exp = /\.|\-|\//g
            cnpj = cnpj.toString().replace( exp, "" ); 
            var digito = new Number(eval(cnpj.charAt(12)+cnpj.charAt(13)));

            for(i = 0; i<valida.length; i++){
                    dig1 += (i>0? (cnpj.charAt(i-1)*valida[i]):0);  
                    dig2 += cnpj.charAt(i)*valida[i];       
            }
            dig1 = (((dig1%11)<2)? 0:(11-(dig1%11)));
            dig2 = (((dig2%11)<2)? 0:(11-(dig2%11)));

            if(((dig1*10)+dig2) != digito)  
                    alert('CNPJ Invalido!');

    }

    //formata de forma generica os campos
    function formataCampo(campo, Mascara, evento) { 
            var boleanoMascara; 

            var Digitato = evento.keyCode;
            exp = /\:|\-|\.|\/|\(|\)| /g
            campoSoNumeros = campo.val().toString().replace( exp, "" ); 

            var posicaoCampo = 0;    
            var NovoValorCampo="";
            var TamanhoMascara = campoSoNumeros.length;; 

            if (Digitato != 8) { // backspace 
                    for(i=0; i<= TamanhoMascara; i++) { 
                            boleanoMascara  = ((Mascara.charAt(i) == ":") || (Mascara.charAt(i) == "-") || (Mascara.charAt(i) == ".") || (Mascara.charAt(i) == "/")) 
                            boleanoMascara  = boleanoMascara || ((Mascara.charAt(i) == "(") 
                                                                    || (Mascara.charAt(i) == ")") || (Mascara.charAt(i) == " ")) 
                            if (boleanoMascara) { 
                                    NovoValorCampo += Mascara.charAt(i); 
                                      TamanhoMascara++;
                            }else { 
                                    NovoValorCampo += campoSoNumeros.charAt(posicaoCampo); 
                                    posicaoCampo++; 
                              }              
                      }      
                    campo.val(NovoValorCampo);
                      return true; 
            }else { 
                    return true; 
            }
    }

});

thanks

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.