Validação de formulário no modal usando Bootstrap – php mysql twitter-bootstrap

5 Dezembro, 2018 admin 0 Comments modal, mysql, php, twitter-bootstrap

Pergunta:

Estou com a seguinte dúvida. Tenho um cadastro simples e quero que ao cadastrar um novo registro ele me fale:

Se o campo estiver vazio ele me mostre a mensagem “Preencha os campos”;
Se o campo do formulário já houver no banco de dados ele mostra que “Valor duplicado”;
Se ainda não houver, ele salvará no banco;

Bom, mas eu queria fazer esta verificação no modal. Fiz os seguintes testes:

INDEX.PHP

<html>

<title>Modal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<head>

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
  .modal-header, h4, .close {
      background-color: #5cb85c;
      color:white !important;
      text-align: center;
      font-size: 30px;
  }
  .modal-footer {
      background-color: #f9f9f9;
  }
  </style>
</head>
<body>

<form action="teste.php" method="post">
    Nome:  <input type="text" name="username" > <input type="submit" name="submit" value="Abrir sem modal" />

<div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Abrir com modal</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Teste Modal</h4>
        </div>
        <div class="modal-body">
          <p><?php include 'teste.php'; ?></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
      </div>
    </div>
  </div>
</div>

</form>

</body>
</html>

TESTE.PHP

<?php

require("conexao.php");

        $nome = $_POST['username'];

        if ($nome == "")  {
            echo "Preencha o campo";
        } else {
            $sql = mysql_query("SELECT nome FROM tb_visitas WHERE nome='$nome'");

            if (mysql_num_rows($sql) > 0) {
                echo "Valor duplicado";
            } else {
                echo "Gravando registro";
            }
        }   
?>

No botão “sem modal” ele faz a verificação correta, é possível fazer o mesmo com o modal?

Autor da pergunta netovgs

se alguém ainda estiver precisando… pode ser feito algo assim, primeiro cancela o submit do formulário com event.preventDefault() depois faz uma varredura em todos os inputs $.each() para verificar se estão preenchidos, e por fim a chamada $.ajax trabalhando o retorno.

<script>
var form = $('.form-validation')[0];
if(form != undefined){
    form.addEventListener('submit', function(event) {
            if (!event.target.checkValidity()) {
                event.preventDefault();
                $('.form-validation [required]').each(function(i, o){
                    if(!$(o).val().length){
                        $(o).addClass('input-error');
                    } else {
                        $(o).removeClass('input-error');
                    }
                });
                if($('.input-error').length == 0){
                    $.ajax({
                        type: 'post',
                        url: 'teste.php's,
                        data: $('.form-validation').serialize(),
                        contentType: 'application/x-www-form-urlencoded',
                        success: function(response) {
                            if(response.status == 'salvo') {
                                alert('salvo');
                            } else if (response.status == 'duplicado'){
                                alert('duplicado');
                            }
                        },
                        error: function(xhr, error) {
                            alert(error);
                        }
                    })
                }
            }
        }, false);
</script>

e no arquivo .php tem que retornar um json, para ser trabalhado no parâmetro response

<?php
    $sql = mysql_query("SELECT nome FROM tb_visitas WHERE nome='{$_POST['nome']}'");

    if (mysql_num_rows($sql) > 0) {
        echo json_encode(array('status'=>'duplicado'));
    } else {
        //SQL INSERT INTO tb_visitas
        echo json_encode(array('status'=>'salvo'));
    }
 ?>

Claro que não é só por o código que tudo irá funcionar como mágica, faz uma analise na solução.

Pode sim perfeitamente, simples :

o formulário está fora do modal e o “submit” abre o modal
insere um “loading da vida” no modal
e retorna via AJAX o callback (success) no modal;

$(function(){

   $.ajax({
     url : 'update.php',
     type : 'POST',
     data : info_do_formulario,
     beforeSend : function(){
       // insere algum loading dentro do modal
       $('#myModal').modal('show'); // abre o modal
     },
     success : function(data){
       // substitui o loading pelo callback 'data', com a sua resposta específica
     }
   });


});

A melhor forma de fazer isso de acordo com o seu código é através do JavaScript. Pelo que eu percebi você está usando o jQuery, então validar se os campos estão vazios ou não é bem simples. Por exemplo:

if ($('#username').val() != '') {
  alert('campo preenchido');
} else {
  alert('campo vazio');
}

Com relação a consulta no banco pra verificar se o valor não está duplicado, da pra fazer usando o método Ajax do próprio jQuery, onde você fará uma requisição a um arquivo PHP no servidor que executará uma query no banco de dados e retornará true ou false (em json) caso o valor já exista ou não.

De forma exemplificada seria o seguinte:

$.ajax({
  url: 'http://dominio.com/arquivo.php', // arquivo PHP que consultará o BD
  data: {'username':$('#username').val()}, // conteúdo do campo username
  success: function(resultado) {
    // verificando o json que retornou
    if (resultado.status == true) {
      alert('nome válido');
    } else {
      alert('nome duplicado');
    }
  },
  dataType: json
});

Fonte