How to use the required and check if the data has already been entered?

Asked

Viewed 39 times

-1

How can I make it mandatory for the user to fill in all the form fields? I tried to put required in the code but for some reason there is no message that usually appears when I put the same code in an HTML file.

Code index.php:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site</title>
</head>

<body>
<!-- Formulário Agenda -->
<div class="modal fade" id="agenda" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
<form name="calendario" id="calendario" method="post" class="form-horizontal">
<div>
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h2 class="text-uppercase align-self-end text-center">Agendamento</h2>
<hr class="divider">
</div>

        <div class="form-group">
<label class="control-label col-xs-4">Primeiro Nome</label>
<div class="col-xs-8">
                <input type="text" class="form-control" name="pnome" required="required">
            </div>        
        </div>
<div class="form-group">
<label class="control-label col-xs-4">Número de telemóvel</label>
<div class="col-xs-8">
                <input type="text" class="form-control" name="numerotmv" required="required">
            </div>        
        </div>
<div class="form-group">
<label class="control-label col-xs-4">Local da Sessão</label>
<div class="col-xs-8">
                <input type="text" class="form-control" name="localsessao" required="required">
            </div>        
        </div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" name="data" type="date" required="required">
<span class="form-label">Data</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="form-control" name="hora" type="time" required="required">
<span class="form-label">Hora</span>
</div>
</div>
</div>
   <div class="form-group">
<div class="col-xs-8 col-xs-offset-4">
<button type="submit" onClick="verificarAgendamento()" class="btn btn-primary btn-lg">Agendar</button>
</div>  
</div>      
    </form>
</div>
     </div>
   </div>
 </div>

<script>
function verificarAgendamento(){
event.preventDefault();
$.ajax({
type: "POST",
url: "agendamento.php",
data: $("#calendario").serialize(),
success: function(resultado){
if(resultado==0){  
  alert("Erro");  
  }else{
  alert("Agendamento feito com sucesso");
  }
return false;
}
});
$('#calendario')[0].reset();
return false;
}
</script>

</body>
</html>

Scheduling code.php:

<?php

include("conecta.php");

$pnome=$_POST['pnome'];
$numerotmv=$_POST['numerotmv'];
$localsessao=$_POST['localsessao'];
$data=$_POST['data'];
$hora=$_POST['hora'];

$pesquisaUsuario = mysqli_num_rows(mysqli_query($conexao,"
SELECT nome FROM agendamento
WHERE numerotmv = '$numerotmv'
"));


if($pesquisaUsuario >0){
echo 1;
}else{
mysqli_query($conexao, "insert into agendamento (pnome, numerotmv, localsessao, data, hora) values('$pnome','$numerotmv', '$localsessao','$data','$hora')");
echo 0;
}



?>

Structure of my database:estrutura base de dados

Thank you to everyone who has spent their precious time reading this post to help me. I am very grateful.

php mysql database

  • From what I could see you are using jQuery to send the form via HTTP POST to your PHP file. I tested exactly the code posted and it returns me Referenceerror: $ is not defined. you made sure to do the correct jquery import ?

1 answer

0


I believe the problem is in the event you are using to perform the request. How you use the event onClick, the function is being called independent of the inputs whether or not they are completed, so I recommend that you make the following changes to your code:

  1. Remove the event onClick of your button:
    <button type="submit" class="btn btn-primary btn-lg">Agendar</button>
  1. Import jQuery if you haven’t already:
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  1. Leave your javascript this way:
document.querySelector('form').addEventListener('submit', (e) => {
      e.preventDefault();
      $.ajax({
        type: "POST",
        url: "agendamento.php",
        data: $("#calendario").serialize(),
        success: function (resultado) {
          if (resultado == 0) {
            alert("Erro");
          } else {
            alert("Agendamento feito com sucesso");
          }
          return false;
        }
      });
      $('#calendario')[0].reset();
      return false
    });

In document.querySelector('form').addEventListener('submit', (e) => { }) the form is selected and the event of submit. The second parameter is the callback that will be executed when the event is called, basically it is the code of its function verificarAgendamento

Browser other questions tagged php mysql database

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