1

Estou tentando renderizar um campo input telefone mas não está ocorrendo como esperado:

<?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>

esta pagina trata-se de um formulário que é requerido pela pagina index que tem o seguinte conteúdo:

<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>

O que está acontecendo é o seguinte o form faz a validação ou seja caso não for (00) 0000-0000 não processa para o script de inserção no banco de dados, o input fica da seguinte forma: inserir a descrição da imagem aqui

tenho os seguintes diretórios em meu projeto: inserir a descrição da imagem aqui

agradeço the help.

1

2 Respostas 2

3

O problema é que estás a carregar o jQuery 2 vezes.

No inicio carregas o "teu" jQuery local de ../view/assets/js/jQuery.js, seguido do mask.js. Até aí tudo bem. Mas depois carregas o jquery-latest.js e aí a coisa quebra.

Sugestão:

Usa somente o jquery-latest.js e carrega-o antes do mask.js. Assim usas o mesmo jQuery para o Bootstrap e para o mask.

1
  • 1
    certíssimo assim que removi o jQuery deixando apenas o jquery-latestet.js tudo funcionou como esperado, @Sergio obrigado. 31/05/2015 às 22:44
1

A função .mask não é nativa do Jquery, você tem que importar o plugin depois de chamar o jquery.min.

Segue um exemplo do Jquery Mask funcionando,

$("#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}" />
                   

4
  • Qual a diferença entre este código e o do AP?
    – Sergio
    31/05/2015 às 21:12
  • @Sergio, só o import mesmo
    – haykou
    31/05/2015 às 21:16
  • 1
    cara você pode dar um exemplo de como posso fazer isso, por que sua resposta você mudou apenas os imports e nada mais. 31/05/2015 às 22:07
  • 1
    dentro do teu <head> coloca os dois script usando a cdn do jeito que eu postei e veja se funciona]
    – haykou
    31/05/2015 às 22:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .