-1

Boa tarde! Estou desenvolvendo uma página de pagamento online num projeto de agência de viagem e gostaria de colocar uma validação pra saber se a pessoa colocou as informações certas. Porém fiz o javascript e não está funcionando de jeito nenhum a validação. Tenho muitas outras páginas de bancos pra fazer a validação posso uma validação pra validar mais páginas ou preciso criar uma validação pra cada página?

showModal = function(mensagem, callback) {
    $('#erroModal').find('.modal-body').text(mensagem);
    $('#erroModal').find('.modal-footer .btn').click(callback);
    $('#erroModal').modal('show');
}

function pagamentovalidacao () {
    if (document.pagamento.nome.value == "") {
        showModal ("Por favor, insira seu nome.", function () {
            document.pagamento.nome.focus();
        });
        return false;
    }
    if (document.pagamento.sobrenome.value == "") {
        showModal ("Por favor, insira seu sobrenome.", function () {
            document.pagamento.sobrenome.focus();
        });
        return false;
    }
    if (document.pagamento.agencia.value == "") {
        showModal ("Por favor, insira sua agência.", function () {
            document.pagamento.agencia.focus();
        });
        return false;
    }
    if (document.pagamento.senha.value == "") {
        showModal ("Por favor, insira sua senha.", function () {
            document.pagamento.senha.focus();
        });
        return false;
    }
    return true;
}
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Eco Aero - Viagens</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        
        <!-- Boostrap CSS -->
        <link rel="stylesheet" href="../node_modules/bootstrap/compiler/bootstrap.css">        
        <link rel="stylesheet" type="text/css" href="../estilo/style.css">
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container">
                <a class="navbar-brand h1 mb-0" href="index.html">Eco Aero - Viagens</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                <div class="collapse navbar-collapse" id="navbarSite">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="index.html">Início</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="sobre.html">Sobre</a>
                        </li>
                        <li>
                            <a class="nav-link" href="contato.html">Contato</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="passagensareas.html">Passagens Aéreas</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="login.html">Entrar</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="inscrever.html">Inscrever-se</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1 class="display-4 text-center my-5">Caixa Econômica Federal</h1>
                    <hr>
                </div>
            </div>
            <div class="row justify-content-center mb-5">
                <div class="col-sm-12 col-md-10 col-lg-8">
                    <form name="pagamento" action="#" method="post" onsubmit="return pagamentovalidacao()">
                        <div class="form-row">
                            <div class="form-group col-sm-6">
                                <label for="useName">Nome:</label>
                                <input type="text" class="form-control" id="useName" placeholder="Nome" name="nome">
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="useSobrenome">Sobrenome:</label>
                                <input type="text" class="form-control" id="useSobrenome" placeholder="Sobrenome" name="sobrenome">
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="useAgencia">Agência:</label>
                                <input type="text" class="form-control" id="useAgencia" placeholder="Agencia" name="agencia">
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="useSenha">Senha de 4 dígitos:</label>
                                <input type="password" class="form-control" id="useSenha" placeholder="0000" name="senha">
                            </div>
                            <div class="form-group col-sm-12">
                                <button type="submit" class="btn btn-outline-dark btn-lg btn-block">Pagar</button> 
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12 mb-3"><hr></div>
                <div class="col-sm-4">
                    <h3>Eco Aero - Viagens</h3>
                    <p>A melhor agência de viagens sobre medidas para todos os tipos de pessoas e gostos.Viaje com a gente e venha conhecer novos lugares, culturas e compartilhar as melhores imagens e guardar as melhores lembranças.</p>
                </div>
                <div class="col-sm-4">
                    <h3>Menu</h3>
                    <div class="list-group text-center">
                        <a href="index.hml" class="list-group-item list-group-item-action list-group-item-dark">Início</a>
                        <a href="sobre.html" class="list-group-item list-group-item-action list-group-item-dark">Sobre</a>
                        <a href="contato.html" class="list-group-item list-group-item-action list-group-item-dark">Contato</a>
                        <a href="passagensareas.html" class="list-group-item list-group-item-action list-group-item-dark">Passagens Aéreas</a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h3>Social</h3>
                    <div class="btn-group-vertical btn-block btn-group-lg" role="group">
                        <a class="btn btn-outline-primary" href="#">Facebook</a>
                        <a class="btn btn-outline-info" href="#">Twitter</a>
                        <a class="btn btn-outline-warning" href="#">Instagram</a>
                    </div>
                </div>
                <div class="col-12 mt-5">
                    <blockquote class="blockquote text-center">
                        <p class="mb-0">O sucesso não é garantido, mas o fracasso é certo se você não estiver emocionalmente envolvido em seu trabalho.</p>
                        <footer class="blockquote-footer">Biz Stone <cite title="Título">Fundador do Twitter</cite></footer>
                    </blockquote>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal" id="erroModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title"> Eco Aero - Viagens </h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sucess" data-dismiss="modal">OK</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jquery first, then popper.js, then Bootstrap 3S -->
        <script src="../node_modules/jquery/dist/jquery.js"></script>
        <script src="../node_modules/popper.js/dist/umd/popper.js"></script>
        <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
    </body>
</html>

2
  • 1
    "Não está funcionando" não diz nada. É preciso descrever o problema, o que está acontecendo e o que espera acontecer.
    – Sam
    Commented 2/08/2019 às 20:31
  • Já consegui resolver o problema. Mais obrigada por responder. Commented 2/08/2019 às 20:49

1 Resposta 1

-2

A função pagamentovalidacao() não define o valor dos campos. A função showModal apresenta erro ao tentar colocar o cursor no campo em questão e também não abre o modal de erro pois estava faltando atributos necessários para abri e fechar.

Segue correção:

var showModal = function (mensagem, callback) {
        $('#erroModal').find('.modal-body').text(mensagem);
        $('#erroModal').on('hidden.bs.modal', callback);
        $('#erroModal').modal('show');
    };

    function pagamentovalidacao() {

        var nome = document.getElementById('useName');
        var sobrenome = document.getElementById('useSobrenome');
        var agencia = document.getElementById('useAgencia');
        var senha = document.getElementById('useSenha');

        if (nome.value === "") {
            showModal("Por favor, insira seu nome.", function () {
                nome.focus();
            });
            return false;
        } else if (sobrenome.value === "") {
            showModal("Por favor, insira seu sobrenome.", function () {
                sobrenome.focus();
            });
            return false;
        } else if (agencia.value === "") {
            showModal("Por favor, insira sua agência.", function () {
                agencia.focus();
            });
            return false;
        }
        if (senha.value === "") {
            showModal("Por favor, insira sua senha.", function () {
                senha.focus();
            });
            return false;
        }

        return true;
    }
<script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
<div class="container">

    <div class="row justify-content-center mb-5">
        <div class="col-sm-12 col-md-10 col-lg-8">
            <form name="pagamento" action="#" method="post" onsubmit="return pagamentovalidacao();">
                <div class="form-row">
                    <div class="form-group col-sm-6">
                        <label for="useName">Nome:</label>
                        <input type="text" class="form-control" id="useName" placeholder="Nome" name="nome">
                    </div>
                    <div class="form-group col-sm-6">
                        <label for="useSobrenome">Sobrenome:</label>
                        <input type="text" class="form-control" id="useSobrenome" placeholder="Sobrenome"
                               name="sobrenome">
                    </div>
                    <div class="form-group col-sm-6">
                        <label for="useAgencia">Agência:</label>
                        <input type="text" class="form-control" id="useAgencia" placeholder="Agencia" name="agencia">
                    </div>
                    <div class="form-group col-sm-6">
                        <label for="useSenha">Senha de 4 dígitos:</label>
                        <input type="password" class="form-control" id="useSenha" placeholder="0000" name="senha">
                    </div>
                    <div class="form-group col-sm-12">
                        <button type="submit" class="btn btn-outline-dark btn-lg btn-block">Pagar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="erroModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Eco Aero - Viagens</h4>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

</div>

1
  • Valeu, obrigada. Commented 2/08/2019 às 21:07

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 .