1
Good afternoon! I am developing an online payment page for a travel agency project and would like to put a validation to see if the person has put the right information. But I did javascript and the validation is not working at all. I have many other pages of banks to do the validation can a validation to validate more pages or I need to create a validation for each page?
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">×</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>
"It’s not working" says nothing. You have to describe the problem, what is happening and what you expect to happen.
– Sam
I’ve already solved the problem. Thanks more for answering.
– RayanneRamos