0
I have a single page on HTML, using the bootstrap + templates in which it has a registration form and it has two password fields, one to type and one to validate (if it is equal). I tried to jQuery, HTML5 (with the data-toogle tags), JS (direct) and not one of them performs the check. I’ll post the code below so someone can help me.
Ahh... just a reminder.. i want that when the user leaves the field confirm password (before clicking the "Continue my registration" button), that the page already inform if the password is different or not.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tuter - Transformando Vidas</title>
<!-- load stylesheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400"> <!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Bootstrap style -->
<link rel="stylesheet" href="css/templatemo-style.css"> <!-- Templatemo style -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.js" ></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/validator.min.js"></script>
</head>
<body>
<div class="container tm-container">
<div class="row navbar-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 navbar-container">
<a href="javascript:void(0)" class="navbar-brand"
id="go-to-top"><img src="img/logo-tuter-new.png"
alt="Tuter" class="img-thumbnail img-responsive" width="330px"></a>
<nav class="navbar navbar-full">
<div class="collapse navbar-toggleable-md" id="tmNavbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#tm-section-1">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tm-section-2">O Caminho</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tm-section-3">Detalhes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tm-section-4">Cadastre-se</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tm-section-5">Contato</a>
</li>
</ul>
</div>
</nav>
<form class="navbar-form navbar-right" id="formLogin" name="formulario" action="Tuter/login" method="POST">
<div class="form-group">
<input type="text" class="form-control" id="login" name="login" placeholder="Login" >
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Senha">
</div>
<button type="submit" class="btn btn-default">Entrar</button>
</form>
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
☰
</button>
</div>
</div>
<div class="tm-page-content">
<!-- #home -->
<section id="tm-section-1" class="row tm-section">
<div class="tm-white-curve-left col-xs-12 col-sm-12 col-md-12 col-lg-7 col-xl-6">
<div class="tm-white-curve-left-rec"></div>
<div class="tm-white-curve-left-circle"></div>
<div class="tm-white-curve-text"><br />
<h2 class="tm-section-header blue-text">Aumente sua Renda</h2>
<p>
<strong>Seria ótimo</strong> para você se conseguisse <strong>viver com menos da metade de sua renda mensal</strong>, e o restante poder guardar para um <strong>melhor planejamento financeiro</strong> para seu futuro? Sim.. nós sabemos que na atualidade isso não é muito comum.
</p>
<p>
E se nós lhe ensinarmos <strong>passo a passo</strong>, como conseguir <strong>ter essa realidade na sua vida?</strong> Nós temos os <strong>métodos já comprovados</strong> por milhares de pessoas ao redor do mundo, que <strong>existe sim a possibilidade</strong> de você conseguir viver com menos da metade de sua renda mensal e ainda por cima, construir um futuro próspero para sua família.
</p>
</div>
</div>
<div class="tm-home-right col-xs-12 col-sm-12 col-md-12 col-lg-5 col-xl-6">
<h2 class="tm-section-header">Simples assim</h2>
<p class="thin-font">Bastando você aplicar os conhecimentos <strong>fornecidos pela Tuter</strong>, em pouco tempo você conseguirá obter <strong>resultados maravilhosos.</strong> </p>
</div>
</section> <!-- #home -->
<!-- #services -->
<section id="tm-section-2" class="row tm-section">
<div class="tm-flex-center col-xs-12 col-sm-6 col-md-6 col-lg-5 col-xl-6">
<img src="img/podemos-ser-o-que-queremos.jpg" alt="Image" class="img-fluid tm-img">
</div>
<div class="tm-white-curve-right col-xs-12 col-sm-6 col-md-6 col-lg-7 col-xl-6">
<div class="tm-white-curve-right-circle"></div>
<div class="tm-white-curve-right-rec"></div>
<div class="tm-white-curve-text">
<h2 class="tm-section-header red-text">Aprendizado + Prática = Sucesso</h2>
<p>Uma das frases que certamente pode lhe mostrar a realidade é essa de Albert Eisten: Não há nada que seja maior evidência de insanidade do que fazer a mesma coisa dia após dia e esperar resultados diferentes.</p>
<p class="thin-font">Com a Tuter você terá a <strong>oportunidade</strong> de já começar a fazer o <strong>CORRETO desde o início.</strong> Nossos produtos são aliados com as <strong>soluções exatas</strong> para o seu crescimento!</p>
</div>
</div>
</section> <!-- #services -->
<!-- #about -->
<section id="tm-section-3" class="row tm-section">
<div class="tm-white-curve-left col-xs-12 col-sm-6 col-md-6 col-lg-7 col-xl-6">
<div class="tm-white-curve-left-rec">
</div>
<div class="tm-white-curve-left-circle">
</div>
<div class="tm-white-curve-text">
<h2 class="tm-section-header gray-text">Detalhes que fazem a diferença!</h2>
<p class="thin-font">Agora é seu momento. Você precisa tomar uma atitude que faça a diferença em sua vida. Más antes ainda de iniciar essa nova etapa, você precisa <strong>conhecer mais detalhes</strong> das mudanças que fará em sua vida.</p>
<p>Clique nessa imagem abaixo, e faça o download para seu computador a nossa <strong>apresentação oficial.</strong></p>
<p><div class="td-of"><a href="https://drive.google.com/open?id=0B67pi7C0c1XQc3JTVkhEdWJBOWc"><img src="img/apresentacao.png"></a></div></p>
</div>
</div>
<div class="tm-flex-center col-xs-12 col-sm-6 col-md-6 col-lg-5 col-xl-6">
</div>
</section> <!-- #about -->
<!-- #contact -->
<section id="tm-section-4" class="row tm-section">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-5 col-xl-6 tm-contact-left">
<h1 class="tm-section-header thin-font col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> </h1>
<h2 class="tm-section-header yellow-text">Agora sim é <strong>O SEU MOMENTO</strong></h2>
<p>Você não pode perder essa oportunidade em sua vida. Afinal, se você realmente quer uma mudança, é NECESSÁRIO DAR O PRIMEIRO PASSO!</p>
<h3 class="tm-section-subheader greenlime-text">Esse é seu primeiro passo.</h3>
<address>
Preencha ao lado com seus dados. Lembrando que todo o nosso site é <strong>SEGURO e seus dados NUNCA SERÃO DIVULGADOS EM LUGAR NENHUM.</strong> Após preencher, aperte em <strong>Continuar meu Cadastro</strong>. Em seguida nosso sistema irá logar pela primeira vez e você simplesmente irá completar seu cadastro.
<p>Pronto! Seja bem vindo a Tuter...</p>
</address>
<div class="contact-info-links-container">
<span class="bluelight-text contact-info">
Caso tenha alguma dúvida, abaixo você pode nos enviar um email e teremos o maior prazer em lhe ajudar!</span>
</div>
</div>
<div class="tm-white-curve-right col-xs-12 col-sm-6 col-md-6 col-lg-7 col-xl-6">
<div class="tm-white-curve-right-circle"></div>
<div class="tm-white-curve-right-rec"></div>
<div class="tm-white-curve-text">
<form id="PreCadastro" action="Tuter/adicionaAssociado" data-toggle="validator" role="form" method="POST">
<fieldset>
<div class="form-group">
<label for="patrocinador">Quem lhe apresentou a Tuter?</label>
<input name="patrocinador" type="text" class="form-control" placeholder="Digite o login de seu Patrocinador!" />
<label for="nome">Qual seu nome?</label>
<input name="nome" type="text" class="form-control" placeholder="Digite seu nome" required="required"/>
<label for="cpf">Nos informe seu CPF?</label>
<input name="cpf" type="text" class="form-control" placeholder="000.000.000-00" required="required"/>
<label for="login">Crie agora seu Novo Login:</label>
<input name="login" type="text" class="form-control" placeholder="Digite seu novo login" required="required"/>
<br>
<label for="password">Crie sua Senha:</label>
<input name="password" type="password" id="inputPassword" class="form-control-pass" placeholder="Mínimo 5 dígitos!" data-minlength="5" required="required"/>
<label for="Rpassword">Repita sua Senha:</label>
<input name="Rpassword" type="password" id="inputConfirm" class="form-control-pass" placeholder="Repita a senha" data-match="#inputPassword" data-match-error="Atenção! As senhas não estão iguais." required/>
</br>
<input type="submit" class="btn btn-primary" value="Continuar meu Cadastro">
</div>
</fieldset>
</form>
</div>
</div>
</section> <!-- #contact -->
<section id="tm-section-5" class="row tm-section">
<div class="tm-white-curve-left col-xs-12 col-sm-6 col-md-6 col-lg-7 col-xl-6">
<div class="tm-white-curve-left-rec">
</div>
<div class="tm-white-curve-left-circle">
</div>
<div class="tm-white-curve-text">
<h1>Entre em contato conosco!</h1>
<form id="Tuter/formEmail" name="formEmail" action="enviaEmail" method="POST">
<div class="form-group">
<label for="nome">Qual seu nome?</label>
<input name="nome" type="text" class="form-control" required="required"/>
<label for="nome">Nos informe seu melhor email?</label>
<input name="email" type="email" class="form-control" required="required" />
<div class="form-group">
<label for="comment">Voce tem alguma duvida? Escreva abaixo que iremos lhe responder o quanto antes!</label>
<textarea name="mensagem" class="form-control" rows="5" required="required"></textarea>
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</div>
</form>
</div>
</div>
<div class="tm-flex-center col-xs-12 col-sm-6 col-md-6 col-lg-5 col-xl-6">
</div>
</section>
<!-- footer -->
<footer class="row tm-footer">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<p class="text-xs-center tm-footer-text">Copyright © 2017 - Tuter</p>
</div>
</footer>
</div>
</div> <!-- .container -->
<!-- load JS files -->
<script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery (https://jquery.com/download/) -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap, http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) -->
<script src="js/jquery.singlePageNav.min.js"></script> <!-- Single Page Nav (https://github.com/ChrisWojcik/single-page-nav) -->
<!-- Templatemo scripts -->
<script>
var bigNavbarHeight = 90;
var smallNavbarHeight = 68;
var navbarHeight = bigNavbarHeight;
$(document).ready(function(){
var topOffset = 180;
$(window).scroll(function(){
if($(this).scrollTop() > topOffset) {
$(".navbar-container").addClass("sticky");
}
else {
$(".navbar-container").removeClass("sticky");
}
});
/* Single page nav
-----------------------------------------*/
if($(window).width() < 992) {
navbarHeight = smallNavbarHeight;
}
$('#tmNavbar').singlePageNav({
'currentClass' : "active",
offset : navbarHeight
});
/* Collapse menu after click
http://stackoverflow.com/questions/14203279/bootstrap-close-responsive-menu-on-click
----------------------------------------------------------------------------------------*/
$('#tmNavbar').on("click", "a", null, function () {
$('#tmNavbar').collapse('hide');
});
// Handle nav offset upon window resize
$(window).resize(function(){
if($(window).width() < 992) {
navbarHeight = smallNavbarHeight;
} else {
navbarHeight = bigNavbarHeight;
}
$('#tmNavbar').singlePageNav({
'currentClass' : "active",
offset : navbarHeight
});
});
/* Scroll to top
http://stackoverflow.com/questions/5580350/jquery-cross-browser-scroll-to-top-with-animation
--------------------------------------------------------------------------------------------------*/
$('#go-to-top').each(function(){
$(this).click(function(){
$('html,body').animate({ scrollTop: 0 }, 'slow');
return false;
});
});
});
</script>
</body>
</html>
It can be seen that on lines 10 to 18 there are the insertions of the tag head. And 175 to 205 has the form.
Try loading the form validation scripts at the end of the body tag
– Giovane
Hello friend... I don’t understand. Right now I’m just using the html tags.. Do you have an example that can help me? I thank you for your willingness!
– Jardel Dint
I believe that the javascript code that makes this validation is inside the script
validator.min.js, try to import it just before the tag<script>at the end of the tag</body>– Giovane