Simple form protection to prevent spam

0

I have the following form:

  <!-- Comments Form -->
          <div class="card my-4">
            <h5 class="card-header">Deixar um comentário</h5>
            <div class="card-body">
<!-- Comentar -->
              <form method="post">
                  <input type="hidden" name="telefone" value="<?php echo $_GET['aluno']; ?>">

                     <div class="form-group">
                          <label class="control-label">Nome</label>
                          <input name="nome" type="text" class="form-control" required placeholder="Nome">
                     </div>

                     <div class="form-group">
                          <label class="control-label">Classificação</label>
                          <select name="classificacao" class="form-control">
                              <option>Usuário?</option>
                              <option value="1">1</option>
                          </select>
                     </div>

                     <div class="form-group">
                          <label class="control-label">Comentário</label>
                          <textarea name="comentario" class="form-control" placeholder="Comentario"></textarea>
                     </div>

                     <div class="form-group">
                          <input type="submit" class="btn btn-success" value="Enviar comentário">
                     </div>
              </form>
            </div>
        </div>

I'd like to add a field with a sum to prevent SPAM.

Ex: How much is 2 + 3? if the answer is 5 lets send the comment, otherwise the comment is not sent.

    
asked by anonymous 06.06.2018 / 16:48

1 answer

1

A simple way would be to create a name="soma" field where the user should enter the sum value:

ThenumbersyoucanrandomlygeneratefromPHPusingtherand(from,to)function,wherefromisthestartingnumberandtothefinalnumber(ex.rand(1,9)willgeneratearandomintegerfrom1to9).

Intheform,youincludeanewform-groupabovethe"Submit" button:

<div class="form-group">
   <label class="control-label">Quanto é <span class="captcha"><?php echo(rand(1,9)); ?></span>+<span class="captcha"><?php echo(rand(1,9)); ?></span>?</label>
   <input name="soma" type="text" class="form-control" required>
</div>

See that I've included both numbers in two <span> with class .captcha to get these values in jQuery, and compare with the value entered in the "soma" field by the user. For this I used a onsubmit event. When the form is submitted, the script will check that the sum is correct. If it is not, it aborts the submit in return false; :

$("form").on("submit", function(){
   var s1 = parseInt($(".captcha:eq(0)").text()); // valor do 1º número
   var s2 = parseInt($(".captcha:eq(1)").text()); // valor do 2º número
   var ss = parseInt($("[name='soma']").val()); // valor da soma

   if(s1+s2 != ss){
      alert("Soma incorreta!");
      return false;
   }

   alert("Envia o formulário normal...");
});

Full Code:

<!-- Comments Form -->
<div class="card my-4">
   <h5 class="card-header">Deixar um comentário</h5>
   <div class="card-body">
      <!-- Comentar -->
      <form method="post">
         <input type="hidden" name="telefone" value="<?php echo $_GET['aluno']; ?>">

         <div class="form-group">
            <label class="control-label">Nome</label>
            <input name="nome" type="text" class="form-control" required placeholder="Nome">
         </div>

         <div class="form-group">
            <label class="control-label">Classificação</label>
            <select name="classificacao" class="form-control">
               <option>Usuário?</option>
               <option value="1">1</option>
            </select>
         </div>

         <div class="form-group">
            <label class="control-label">Comentário</label>
            <textarea name="comentario" class="form-control" placeholder="Comentario"></textarea>
         </div>

         <div class="form-group">
            <label class="control-label">Quanto é <span class="captcha"><?php echo(rand(1,9)); ?></span>+<span class="captcha"><?php echo(rand(1,9)); ?></span>?</label>
            <input name="soma" type="text" class="form-control" required>
         </div>

         <div class="form-group">
            <input type="submit" class="btn btn-success" value="Enviar comentário">
         </div>
      </form>
   </div>
</div>
<script>
$("form").on("submit", function(){
   var s1 = parseInt($(".captcha:eq(0)").text()); // valor do 1º número
   var s2 = parseInt($(".captcha:eq(1)").text()); // valor do 2º número
   var ss = parseInt($("[name='soma']").val()); // valor da soma

   if(s1+s2 != ss){
      alert("Soma incorreta!");
      return false;
   }

   alert("Envia o formulário normal...");
});
</script>
  

But this is just the part of the client side. It's always good to also validate   on the server side. As the question refers only to sending or not the form , validating on the server side can be a subject for another question.

    
06.06.2018 / 19:20