Make field validation identify the user has purposely pressed the space bar

Asked

Viewed 84 times

0

I have the following form:

<form name="form" method="post" id="contact-form">
        <div class="control-group">
         <div class="controls">
           <label for="nome" style="font-weight: normal">Seu nome: <span style="color:red">*</span></label>
           <input type="text" class="form-control" name="Nome" id="nome" placeholder="Coloque seu nome" required="required" />
           <p class="help-block"></p>
         </div>
       </div>
       <div class="control-group">
          <div class="controls">
            <label for"email" style="font-weight: normal">E-mail: <span style="color:red">*</span></label>
           <input type="email" id="email" class="form-control" name="Email" placeholder="Coloque seu e-mail" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"/>
          </div>
       </div>
       <div class="control-group">
          <div class="controls">
            <label for="instituição" style="font-weight: normal">Instituição: <span style="color:red">*</span></label>
           <input type="text" id="instituicao" class="form-control" name="Instituicao" placeholder="Nome da instituição" required />
          </div>
       </div>
       <div class="control-group">
          <div class="controls">
            <label for="telefone" style="font-weight: normal">Telefone: <span style="color:red">*</span></label>
           <input type="tel" id="telefone" class="form-control" name="Telefone" placeholder="Telefone da instituição" maxlength="15" data-mask="(00) 0000-0000" data-mask-selectonfocus="true" required />
          </div>
       </div>
       <div class="control-group">
          <div class="controls">
            <label for="celular" style="font-weight: normal">Celular:</label>
           <input type="tel" id="celular" class="form-control" name="Celular" placeholder="Seu celular ou da instituição" maxlength="14" data-mask="(00) 00000-0000" data-mask-selectonfocus="true" required />
          </div>
       </div>
       <div class="control-group">
          <div class="controls">
            <label for="assunto" style="font-weight: normal">Assunto: <span style="color:red">*</span></label>
           <input type="text" id="assunto" class="form-control" name="Assunto" placeholder="Digite o assunto" value="<?php echo $solicitacao; ?>" <?php echo $readonly; ?> required />
          </div>
       </div>
       <div class="control-group">
              <div class="controls">
                <label for="mensagem" style="font-weight: normal">Mensagem: <span style="color:red">*</span></label>
                 <textarea rows="10" cols="100" name="Mensagem" id="mensagem" class="form-control" placeholder="Coloque sua mensagem ou dúvida aqui" required /></textarea>
             </div>
       </div>
      <div class="control-group">
               <div class="controls">
                  <?php
                  $codigoCaptcha = substr(md5(time()) ,0, 5);
                  if(!isset($_SESSION["Captcha"])){
                     $_SESSION["Captcha"] = $codigoCaptcha;
                  }
                   echo "<div id='captcha' data-valor='".$_SESSION["Captcha"]."'>".$_SESSION["Captcha"]."</div>";
                  ?>
                  <label>Digite o código acima:</label>
                  <div id="success" style="color: green"></div>
                  <input type="text" class="form-control" name="Captcha" id="textCaptcha" title="Digite o código <?php echo $_SESSION["Captcha"]; ?>" required />
               </div>
         </div>
       <div align="center" style="margin-top: 10px">
           <div id="erro" style="color: red"></div>
       <button type="button" id="enviar" class="btn btn-primary btn-lg col-lg-12" title="Enviar mensagem">Enviar</button><br />
       </div>
</form>

To validate the fields, I’m doing it this way:

<script>
$(function(){
    $("#enviar").click(function(){
     var captcha = $("#captcha").data("valor");
     var nome = $('#nome').val();
     var email = $('#email').val();
     var instituicao = $("#instituicao").val();
     var telefone = $("#telefone").val(); 
     var assunto = $('#assunto').val();
     var mensagem = $('#mensagem').val();
     var input = $("input[name='Captcha']").val();
    if(nome == ''){
        $('#erro').html("<div class='alert alert-danger text-left'><i class=\"fas fa-exclamation-triangle\"></i> Favor colocar seu nome</div>"); 
    }else if(email == ''){
        $('#erro').html("<div class='alert alert-danger text-left'><i class=\"fas fa-exclamation-triangle\"></i> Favor colocar seu e-mail</div>"); 
    }else if(instituicao == ''){
        $('#erro').html("<div class='alert alert-danger text-left'><i class=\"fas fa-exclamation-triangle\"></i> Favor colocar o nome da instituição</div>"); 
    }else if(telefone == ''){
        $('#erro').html("<div class='alert alert-danger text-left'><i class=\"fas fa-exclamation-triangle\"></i> Favor colocar o telefone</div>"); 
    }else if(assunto == ''){
        $('#erro').html("<div class='alert alert-danger text-left'><i class=\"fas fa-exclamation-triangle\"></i> Favor colocar o assunto</div>"); 
    }else if(mensagem == ''){
        $('#erro').html("<div class='alert alert-danger text-left'><i class=\"fas fa-exclamation-triangle\"></i> Favor colocar a mensagem</div>");     
    }else if(input != captcha){
        $('#erro').html("<div class='alert alert-danger text-left'><i class=\"fas fa-exclamation-triangle\"></i> Captcha não confere</div>");      
      }else{
         $.post("<?php echo $caminhoAbsoluto; ?>/enviar.php", $("#contact-form").serialize(), function(response) {
       //$('#success').html(response);
    });
    return false;
    }
   });
});  
</script>

It works, but I realized that if the user presses the space bar, it interprets as characters and with this goes through validation. How do I prevent the user from purposely clicking the space bar and thereby prevent the form from being sent without text?

jquery

2 answers

1

Tried to use the trim to capture the value from within the variables?

For example:

var nome = $('#nome').val().trim();

1


Just use trim values. This method returns the string without the beginning spaces and the end spaces. For example: " abc ".trim() will return "abc". When his string is formed only by spaces, the trim will return "" and its validation will work.

Follow your code with trim:

$(function(){
    $("#enviar").click(function(){
     var captcha = $("#captcha").data("valor");
     var nome = $('#nome').val().trim();
     var email = $('#email').val().trim();
     var instituicao = $("#instituicao").val().trim();
     var telefone = $("#telefone").val().trim(); 
     var assunto = $('#assunto').val().trim();
     var mensagem = $('#mensagem').val().trim();
     var input = $("input[name='Captcha']").val().trim();
    if(nome == ''){
        $('#erro').html("<div class='alert alert-danger text-left'><i class=\"fas fa-exclamation-triangle\"></i> Favor colocar seu nome</div>"); 
    }else if(email == ''){
        $('#erro').html("<div class='alert alert-danger text-left'><i class=\"fas fa-exclamation-triangle\"></i> Favor colocar seu e-mail</div>"); 
    }else if(instituicao == ''){
        $('#erro').html("<div class='alert alert-danger text-left'><i class=\"fas fa-exclamation-triangle\"></i> Favor colocar o nome da instituição</div>"); 
    }else if(telefone == ''){
        $('#erro').html("<div class='alert alert-danger text-left'><i class=\"fas fa-exclamation-triangle\"></i> Favor colocar o telefone</div>"); 
    }else if(assunto == ''){
        $('#erro').html("<div class='alert alert-danger text-left'><i class=\"fas fa-exclamation-triangle\"></i> Favor colocar o assunto</div>"); 
    }else if(mensagem == ''){
        $('#erro').html("<div class='alert alert-danger text-left'><i class=\"fas fa-exclamation-triangle\"></i> Favor colocar a mensagem</div>");     
    }else if(input != captcha){
        $('#erro').html("<div class='alert alert-danger text-left'><i class=\"fas fa-exclamation-triangle\"></i> Captcha não confere</div>");      
      }else{
         $.post("<?php echo $caminhoAbsoluto; ?>/enviar.php", $("#contact-form").serialize(), function(response) {
       $('#success').html(response);
    });
    return false;
    }
   });
});  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form" method="post" id="contact-form">
        <div class="control-group">
         <div class="controls">
           <label for="nome" style="font-weight: normal">Seu nome: <span style="color:red">*</span></label>
           <input type="text" class="form-control" name="Nome" id="nome" placeholder="Coloque seu nome" required="required" />
           <p class="help-block"></p>
         </div>
       </div>
       <div class="control-group">
          <div class="controls">
            <label for"email" style="font-weight: normal">E-mail: <span style="color:red">*</span></label>
           <input type="email" id="email" class="form-control" name="Email" placeholder="Coloque seu e-mail" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"/>
          </div>
       </div>
       <div class="control-group">
          <div class="controls">
            <label for="instituição" style="font-weight: normal">Instituição: <span style="color:red">*</span></label>
           <input type="text" id="instituicao" class="form-control" name="Instituicao" placeholder="Nome da instituição" required />
          </div>
       </div>
       <div class="control-group">
          <div class="controls">
            <label for="telefone" style="font-weight: normal">Telefone: <span style="color:red">*</span></label>
           <input type="tel" id="telefone" class="form-control" name="Telefone" placeholder="Telefone da instituição" maxlength="15" data-mask="(00) 0000-0000" data-mask-selectonfocus="true" required />
          </div>
       </div>
       <div class="control-group">
          <div class="controls">
            <label for="celular" style="font-weight: normal">Celular:</label>
           <input type="tel" id="celular" class="form-control" name="Celular" placeholder="Seu celular ou da instituição" maxlength="14" data-mask="(00) 00000-0000" data-mask-selectonfocus="true" required />
          </div>
       </div>
       <div class="control-group">
          <div class="controls">
            <label for="assunto" style="font-weight: normal">Assunto: <span style="color:red">*</span></label>
           <input type="text" id="assunto" class="form-control" name="Assunto" placeholder="Digite o assunto" value="<?php echo $solicitacao; ?>" <?php echo $readonly; ?> required />
          </div>
       </div>
       <div class="control-group">
              <div class="controls">
                <label for="mensagem" style="font-weight: normal">Mensagem: <span style="color:red">*</span></label>
                 <textarea rows="10" cols="100" name="Mensagem" id="mensagem" class="form-control" placeholder="Coloque sua mensagem ou dúvida aqui" required /></textarea>
             </div>
       </div>
      <div class="control-group">
               <div class="controls">
                  <?php
                  $codigoCaptcha = substr(md5(time()) ,0, 5);
                  if(!isset($_SESSION["Captcha"])){
                     $_SESSION["Captcha"] = $codigoCaptcha;
                  }
                   echo "<div id='captcha' data-valor='".$_SESSION["Captcha"]."'>".$_SESSION["Captcha"]."</div>";
                  ?>
                  <label>Digite o código acima:</label>
                  <div id="success" style="color: green"></div>
                  <input type="text" class="form-control" name="Captcha" id="textCaptcha" title="Digite o código <?php echo $_SESSION["Captcha"]; ?>" required />
               </div>
         </div>
       <div align="center" style="margin-top: 10px">
           <div id="erro" style="color: red"></div>
       <button type="button" id="enviar" class="btn btn-primary btn-lg col-lg-12" title="Enviar mensagem">Enviar</button><br />
       </div>
</form>

  • Perfect Mauro. It worked! Thank you very much!

Browser other questions tagged jquery

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