I have a single page in HTML , using the bootstrap templatemo in which it has a registration form and it has two fields one to type and another to validate (if it is the same). I've tried jQuery , HTML5 (with the data-toogle tags), JS the check. I'll post the code below so someone can help me.
Ahh ... just remembering .. I want that when the user leaves the field confirm password (before clicking the "Continue my registration" button), the page already informs 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><scripttype="text/javascript" src="https://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.js"></script><scripttype="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><!--TetherforBootstrap,http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h--><scriptsrc="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>
You can see that on lines 10 through 18 you have the tag head inserts. And from 175 to 205 you have the form.