Validate Password fields

Asked

Viewed 922 times

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">
                    &#9776;
                </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 &copy; 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

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

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

2 answers

1

I have already realized the creation of such a form and what helped me was the method of the site : Webacademy Validation

Try performing the procedure with Validator.

  • Hello friend... I tried to use this script just now and also did not succeed. I don’t know what’s wrong with the code, because I have tried it in many ways and I couldn’t. I thank you for your help.

  • You declared it at the end of the code usually together with the others ? ?

  • You called the script before or after the page content ?

  • I’m sorry, now that I’ve seen your code, you made the call from the script, I’ll run it through here on Bracket real quick, if I find anything I’ll answer you back.

  • Okay William... thank you for your willingness!

0

To show the message, you must place a div with the classes help-block and with-errors, after the field:

<div class="help-block with-errors"></div>

Field:

<label for="inputPassword" class="control-label">Senha</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Digite sua Senha..."              data-minlength="6" required>
<span class="help-block">Mínimo de seis (6) digitos</span>

Validation can also be enabled via Javascript when required:

$('#formExemplo').validator();

Browser other questions tagged

You are not signed in. Login or sign up in order to post.