MASK field does not render formatting

Asked

Viewed 449 times

1

I’m trying to render a field input phone but not occurring as expected:

<?php
include_once '../entity/UsuarioEntity.php';
include_once '../configs/PDOUtil.php';
include_once '../dao/PaisDao.php';
include_once '../dao/EstadoDao.php';
include_once '../dao/CidadeDao.php';
include_once '../dao/UsuarioDao.php';
$daoPais = new PaisDao();
$daoEstado = new EstadoDao();
$daoCidade = new CidadeDao();
?>  
 <html>
   <head>
      <title>Inserção de arquivos</title>
      <script type="text/javascript" src="../view/assets/js/jQuery.js"></script>




    <script type="text/javascript">

        function getValorEstado(valor) {

            $("#idCidade").html("<option value='0'>Carregando...</option>");
            setTimeout(function () {
                $("#idCidade").load("../uteis/selectCidade.php", {idEstado: valor})
            }, 500);
        }
        ;
        $("#telefone").mask("(00) 0000-00009");
    </script>

</head>

<body>
    <div class="hero-unit">
        <div class="form-actions cinzaGrafite">
            <h2>Painel do usuário</h2>
        </div>

        <div class="container-fluid">
            <div class="row-fluid">

                <div class="span6">


                    <form action="index.php?pagina=../controller/controllerUser&acao=inserir" method="POST" enctype="multipart/form-data">           
                        <label>Nome:</label>
                        <input class="input-xlarge" type="text" id="nome" name="nome" required="" autofocus=""> <br/>
                        <label>CPF:</label>
                        <input type="text" id="cpf" name="cpf" required="" autofocus=""> <br/>

                        <label>Senha:</label>
                        <input class="input-large" type="text" name="senha" required="" autofocus=""> <br/>

                        <label>Repetir a senha:</label>
                        <input class="input-large" type="text" name="confirmarSenha"  required="" autofocus=""> <br/>

                        <label>CEP:</label>
                        <input class="input-medium" type="text" name="cep" required="" autofocus=""> <br/>

                        <label>Endereço</label>
                        <input class="input-xlarge" type="text" name="descricao" required="" autofocus=""> <br/>

                        <label>Complemento</label>
                        <input class="input-xlarge" type="text" name="complemento" required="" autofocus=""> <br/>


                </div>
                <div class="span6">

                    <label>E-mail</label>
                    <input class="input-xlarge"  type="text" name="email" required=""  autofocus=""> <br/>

                    <label for="telefone">Telefone (xx) xxx-xxxx</label>
                    <input type="tel" name="telefone" id="telefone" pattern="\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4,5}" />

                    <label>Telefone Dois</label>
                    <input class="input-xlarge"  type="text" required="" name="telefoneDois"  autofocus=""> <br/>    

                    <label>Selecione um País</label>
                    <select required="" name="id_pais">
                        <?php
                        $daoPais->selecionaTodosPaises();
                        ?>
                    </select>


                    <label>Selecione um estado</label>    
                    <select name="idEstado" id="idEstado" onchange="getValorEstado(this.value, 0)" required="true">
                        <option selected="" disabled="" value="nulo">Selecione o ESTADO</option>
                        <?php
                        $daoEstado->selecionaTodosEstados();
                        ?>
                    </select>

                    <label>Selecione uma Cidade</label>    
                    <select required="" id="idCidade" name="idCidade">
                        <option selected="" disabled="" value="nulo">Selecione o ESTADO ANTES</option>
                        <!-- chadamada de arquivo aqui com jquery utilizando
                             ajax, o arquivo se encontra uteis/selectCidade.php-->
                    </select>
                    <br></br>

                    <div class="form-actions cinzaGrafite">
                        <input class="btn btn-primary" type="submit" value="salvar">
                        <a class="btn btn-danger" href="index.php?pagina=PaginaResumo" value="Cancelar">Cancelar</a>
                    </div>
                    </form>


                </div>
            </div>
        </div>
    </div>

</body>

this page is a form that is required by the index page that has the following content:

<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">

                <!-- .btn-navbar é usado como alternador para conteúdo de barra de navegação colapsável -->
                <a class="btn btn-navbar" data-toggle="collapse"
                   data-target=".nav-collapse"> <span class="icon-bar"></span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span>
                </a>

                <!-- Tenha certeza de deixar a marca se você quer que ela seja mostrada -->
                <a class="brand" href="index.php">Portfólio Cor</a>


                <ul class="nav">
                    <li class="active"><a href="index.php?pagina=PaginaResumo">Início</a></li>
                </ul>
                <ul class="nav">
                    <li class="dropdown"><a href="index.php" class="dropdown-toggle"
                                            data-toggle="dropdown"> Usuário <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="index.php?pagina=cadastrarUsuarios">Painél de Usuários</a></li>
                            <li><a href="index.php?pagina=verOuEdtarUsuarios">Ver ou editar usuários</a></li>
                        </ul></li>
                </ul>

                <ul class="nav">
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                                            data-toggle="dropdown"> Categorias <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="index.php?pagina=criarCategorias">Painel de categorias</a></li>
                            <li><a href="index.php?pagina=criarCategorias">Ver e editar categorias</a></li>

                        </ul></li>
                </ul>

                <ul class="nav">
                    <li class="dropdown"><a href="index.php" class="dropdown-toggle"
                                            data-toggle="dropdown"> Paginas <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="index.php?pagina=criarPaginas">Criar</a></li>
                            <li><a href="index.php?pagina=editarPaginas">Editar ou excluir</a></li>
                        </ul></li>
                </ul>

                <ul class="nav">
                    <li class="dropdown"><a href="index.php" class="dropdown-toggle"
                                            data-toggle="dropdown"> Imagens <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="index.php?pagina=inserirImagens">Inserir</a></li>

                            <li><a href="index.php?pagina=verImagens">Ver</a></li>
                        </ul></li>
                </ul>

                <ul class="nav">
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                                            data-toggle="dropdown"> Clientes <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="index.php?pagina=clientes">Acompanhamendo de Pedidos</a></li>
                        </ul></li>
                </ul>



            </div>
        </div>
    </div>
    <div>

        <div class="container-fluid">
            <div class="row-fluid">

                <div class="span12">
                    <?php
                    if (isset($_GET["pagina"])) {
                        require ($_GET["pagina"] . ".php");
                    } else {
                        $_GET["pagina"] = "default";
                        require ($_GET["pagina"] . ".php");
                    }
                    ?>
                </div>
            </div>
            </br> </br>
        </div>
    </div>
    <!-- /codigos e arquivos javascript -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script src="../view/assets/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../view/assets/js/jQuery.js"></script>

    <script type="text/javascript" src="../view/assets/js/jquery.mask.min.js"/></script>

</div>

What is happening is the following form does the validation or if it is not (00) 0000-0000 does not process for the input script in the database, the input is as follows: inserir a descrição da imagem aqui

have the following directories in my project: inserir a descrição da imagem aqui

thanks the help.

jquery

2 answers

3


The problem is you’re charging jQuery twice.

At first you load the "your" jQuery site of ../view/assets/js/jQuery.js, followed by Mask.js. So far so good. But then load the jquery-latest.js and then the thing breaks.

Suggestion:

Uses only the jquery-latest.js and loads it before Mask.js. So you use the same jQuery for Bootstrap and Mask.

  • 1

    as soon as I removed jQuery leaving only jquery-latestet.js everything worked as expected, @Sergio thanks.

1

The function .Mask is not native to Jquery, you have to import the plugin after calling the jquery.min.

Follow an example of Jquery Mask working,

$("#telefone").mask("(00) 0000-00009");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/0.9.0/jquery.mask.min.js"></script>

<label for="telefone">Telefone</label>
                    <input type="tel" name="telefone" id="telefone" pattern="\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4,5}" />

  • What is the difference between this code and the AP code?

  • @Sergio, just the same import

  • 1

    guy you can give an example of how I can do it, why your answer you changed only the Imports and nothing else.

  • 1

    inside your <head> put both scripts using Cdn the way I posted and see if it works]

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.