Modal feedback on registration screen

Asked

Viewed 58 times

0

Good night! I have a question about my college work regarding modal feedback. I’ve done all the code both in html and javascript (I put Alert to see if it was working right), but I would like to change Alert by modal to look better. Could someone help me make the modal base and put it to work on javascript?

function validacao () {
    if (document.cadastro.nome.value == "") {
        alert ("Por favor, preencha o campo nome.");
        document.cadastro.nome.focus ();
        return false;
    }
    if (document.cadastro.sobrenome.value == "") {
        alert ("Por favor, preencha o campo sobrenome.");
        document.cadastro.sobrenome.focus ();
        return false;
    }
    if (document.cadastro.endereco.value == "") {
        alert ("Por favor, preencha o campo endereço.");
        document.cadastro.endereco.focus ();
        return false;
    }
    if (document.cadastro.datanascimento.value == "") {
        alert ("Por favor, preencha o campo data de nascimento.");
        document.cadastro.datanascimento.focus ();
        return false;
    }
    if (document.cadastro.cidade.value == "") {
        alert ("Por favor, preencha o campo cidade.");
        document.cadastro.cidade.focus ();
        return false;
    }
    if (document.cadastro.cep.value == "") {
        alert ("Por favor, preencha o campo cep.");
        document.cadastro.cep.focus ();
        return false;
    }
    if (document.cadastro.estado.value == "") {
        alert ("Por favor, preencha o campo estado.");
        document.cadastro.estado.focus ();
        return false;
    }
    if (document.cadastro.email.value == "") {
        alert ("Por favor, preencha o campo email.");
        document.cadastro.email.focus ();
        return false;
    }
    if (document.cadastro.senha.value.length < 8) {
        alert ("Por favor, preencha o campo senha com mais de 8 caracteres.");
        document.cadastro.senha.focus ();
        return false;
    }
    if (document.cadastro.cartao.value == "") {
        alert ("Por favor, preencha o campo cartão de crédito.");
        document.cadastro.cartao.focus ();
        return false;
    }
    if (document.cadastro.bandeira.value == "") {
        alert ("Por favor, preencha o campo bandeira.");
        document.cadastro.bandeira.focus ();
        return false;
    }
    if (document.cadastro.codseguranca.value == "") {
        alert ("Por favor, preencha o campo código de segurança.");
        document.cadastro.codseguranca.focus ();
        return false;
    }
}
<!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" href="node_modules/bootstrap/compiler/style.css">
        <script type="text/JavaScript" src="js/cadastrovalidacao.js">
        </script>
    </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">Faça seu cadrastro</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="cadastro" action="#" method="post" onsubmit="return validacao()">
                        <div class="form-row">
                            <div class="form-group col-sm-6">
                                <label for="seuNome">Nome:</label>
                                <input type="text" class="form-control" id="seuNome" placeholder="Nome" name="nome">
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="seuSobrenome">Sobrenome:</label>
                                <input type="text" class="form-control" id="seuSobrenome" placeholder="Sobrenome" name="sobrenome">
                            </div>
                            <div class="form-group col-sm-8">
                                <label for="seuEndereço">Endereço:</label>
                                <input type="text" class="form-control" id="seuEndereço" placeholder="Av.Paris, 54, Bonsucesso" name="endereco">
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="suaData">Data de Nascimento:</label>
                                <input type="text" class="form-control" id="suaData" placeholder="DD/MM/AAAA" maxlength="8" name="datanascimento">
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="suaCidade">Cidade:</label>
                                <input type="text" class="form-control" id="suaCidade" placeholder="Cidade" name="cidade">
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuCEP">CEP:</label>
                                <input type="text" class="form-control" id="seuCEP" placeholder="00000-000" maxlenght="8" name="cep">
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuEstado">Estado:</label>
                                <select id="seuEstado" class="form-control" name="estado">
                                    <option selected></option>
                                    <option>SP</option>
                                    <option>RJ</option>
                                    <option>MG</option>
                                    <option>ES</option>
                                    <option>PR</option>
                                    <option>SC</option>
                                    <option>RS</option>
                                </select>
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="seuEmail">Email:</label>
                                <input type="text" class="form-control" id="seuEmail" placeholder="[email protected]" name="email">
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="suaSenha">Senha:</label>
                                <input type="password" class="form-control" id="suaSenha" placeholder="Senha" name="senha">
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuCartao">Cartão de Crédito:</label>
                                <input type="text" class="form-control" id="seuCartao" placeholder="0000-0000-0000-0000" maxlength="16" name="cartao">
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="suaBandeira">Bandeira do Cartão</label>
                                <select id="suaBandeira" class="form-control" name="bandeira">
                                    <option selected></option>
                                    <option>Mastecard</option>
                                    <option>Visa</option>
                                    <option>American Expresss</option>
                                    <option>Elo</option>
                                    <option>Sodexo</option>
                                </select>
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuCS">Código de Segurança</label>
                                <input type="text" class="form-control" id="seuCS" placeholder="000" maxlength="3" name="codseguranca">
                            </div>
                            <div class="form-group col-sm-12">
                                <button type="submit" class="btn btn-outline-dark btn-lg btn-block">Cadastrar-se</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.html" 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>
        <!-- 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>

javascript html5

  • Do you already have a modal or do you want us to include a ? do you want the modal to appear before or after sending ? or after processing?

  • You want to use Bootstrap modal?

  • https://www.w3schools.com/bootstrap4/bootstrap_modal.asp

1 answer

3

If the goal is just to warn that the field has error, I find it more interesting to change its color and add a message below. Alerts/modals are very boring and in terms of usability is unnecessary information, but if you still want to use:

showModal = function(mensagem, callback){
  //adiciona texto passado no corpo do modal
  $('#myModal').find('.modal-body').text(mensagem);
  //adiciona callback no botão (vai chamar a função passada)
  $('#myModal').find('.modal-footer .btn').click(callback);
  //Exibe modal
  $('#myModal').modal('show')
}

function validacao () {
    if (document.cadastro.nome.value == "") {
        showModal ("Por favor, preencha o campo nome.", function(){
          document.cadastro.nome.focus ();
        });
        
        return false;
    }
    if (document.cadastro.sobrenome.value == "") {
        showModal ("Por favor, preencha o campo sobrenome.", function(){
          document.cadastro.sobrenome.focus ();
        });
        return false;
    }
    if (document.cadastro.endereco.value == "") {
        showModal ("Por favor, preencha o campo endereço.", function(){
          document.cadastro.endereco.focus ();
        });
        return false;
    }
    if (document.cadastro.datanascimento.value == "") {
        showModal ("Por favor, preencha o campo data de nascimento.", function(){
          document.cadastro.datanascimento.focus ();
        });
        return false;
    }
    if (document.cadastro.cidade.value == "") {
        showModal ("Por favor, preencha o campo cidade.", function(){
          document.cadastro.cidade.focus ();
        });
        return false;
    }
    if (document.cadastro.cep.value == "") {
        showModal ("Por favor, preencha o campo cep.", function(){
          document.cadastro.cep.focus ();
        });
        return false;
    }
    if (document.cadastro.estado.value == "") {
        showModal ("Por favor, preencha o campo estado.", function(){
          document.cadastro.estado.focus ();
        });
        return false;
    }
    if (document.cadastro.email.value == "") {
        showModal ("Por favor, preencha o campo email.", function(){
          document.cadastro.email.focus ();
        });
        return false;
    }
    if (document.cadastro.senha.value.length < 8) {
        showModal ("Por favor, preencha o campo senha com mais de 8 caracteres.", function(){
          document.cadastro.senha.focus ();
        });
        return false;
    }
    if (document.cadastro.cartao.value == "") {
        showModal ("Por favor, preencha o campo cartão de crédito.", function(){
          document.cadastro.cartao.focus ();
        });
        return false;
    }
    if (document.cadastro.bandeira.value == "") {
        showModal ("Por favor, preencha o campo bandeira.", function(){
          document.cadastro.bandeira.focus ();
        });
        return false;
    }
    if (document.cadastro.codseguranca.value == "") {
        showModal ("Por favor, preencha o campo código de segurança.", function(){
          document.cadastro.codseguranca.focus ();
        });
        return false;
    }
}
<!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">
        
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </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">Faça seu cadrastro</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="cadastro" action="#" method="post" onsubmit="return validacao()">
                        <div class="form-row">
                            <div class="form-group col-sm-6">
                                <label for="seuNome">Nome:</label>
                                <input type="text" class="form-control" id="seuNome" placeholder="Nome" name="nome">
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="seuSobrenome">Sobrenome:</label>
                                <input type="text" class="form-control" id="seuSobrenome" placeholder="Sobrenome" name="sobrenome">
                            </div>
                            <div class="form-group col-sm-8">
                                <label for="seuEndereço">Endereço:</label>
                                <input type="text" class="form-control" id="seuEndereço" placeholder="Av.Paris, 54, Bonsucesso" name="endereco">
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="suaData">Data de Nascimento:</label>
                                <input type="text" class="form-control" id="suaData" placeholder="DD/MM/AAAA" maxlength="8" name="datanascimento">
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="suaCidade">Cidade:</label>
                                <input type="text" class="form-control" id="suaCidade" placeholder="Cidade" name="cidade">
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuCEP">CEP:</label>
                                <input type="text" class="form-control" id="seuCEP" placeholder="00000-000" maxlenght="8" name="cep">
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuEstado">Estado:</label>
                                <select id="seuEstado" class="form-control" name="estado">
                                    <option selected></option>
                                    <option>SP</option>
                                    <option>RJ</option>
                                    <option>MG</option>
                                    <option>ES</option>
                                    <option>PR</option>
                                    <option>SC</option>
                                    <option>RS</option>
                                </select>
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="seuEmail">Email:</label>
                                <input type="text" class="form-control" id="seuEmail" placeholder="[email protected]" name="email">
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="suaSenha">Senha:</label>
                                <input type="password" class="form-control" id="suaSenha" placeholder="Senha" name="senha">
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuCartao">Cartão de Crédito:</label>
                                <input type="text" class="form-control" id="seuCartao" placeholder="0000-0000-0000-0000" maxlength="16" name="cartao">
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="suaBandeira">Bandeira do Cartão</label>
                                <select id="suaBandeira" class="form-control" name="bandeira">
                                    <option selected></option>
                                    <option>Mastecard</option>
                                    <option>Visa</option>
                                    <option>American Expresss</option>
                                    <option>Elo</option>
                                    <option>Sodexo</option>
                                </select>
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuCS">Código de Segurança</label>
                                <input type="text" class="form-control" id="seuCS" placeholder="000" maxlength="3" name="codseguranca">
                            </div>
                            <div class="form-group col-sm-12">
                                <button type="submit" class="btn btn-outline-dark btn-lg btn-block">Cadastrar-se</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.html" 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>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


 <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">titulo</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
         O texto vai ser inserido aqui
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
        </div>
        
      </div>
    </div>
  </div>


    </body>
</html>

https://www.w3schools.com/bootstrap4/bootstrap_modal.asp https://getbootstrap.com.br/docs/4.1/components/modal/

Browser other questions tagged javascript html5

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