2

Precisava validar um valor antes do mesmo ser enviado, como faço para o mesmo ser validado antes do envio, pq ele o mesmo ja esta enviando direto sem validar a soma do input.

<script type="text/javascript">
	function soma() {
 if (form.soma1.value == 14) {
 	console.log("soma correta");
 }else{
 	alert("por favor informe o valor correto da soma");
 }	 
}
</script>
<form  action="envia.php" method="post" class="form"  onSubmit="return soma();">
<h2 class="text-center" style="font-size: 24px;">teste</h2>
<p class="text-center" style="font-size: 16px; ">Basta preencher o formulário abaixo</p>
<div class="form-group" style="margin-top: 40px;">
   <label>Nome*</label>
   <input type="text" name="nome" class="form-control" required>
</div>
<div class="form-group">
   <label>Email*</label>
   <input type="text" name="email" class="form-control" required>
</div>
<div class="form-group">
   <label>Celular*</label>
   <input type="text" name="cel" class="form-control" required>
</div>
<div class="form-group">
   <label>Cidade*</label>
   <input type="text" name="cidade" class="form-control" required>
</div>
<div class="form-group">
   <label>3 + 11 = ?</label>
   <input type="text" name="soma1" value="" class="form-control" required>
</div>
<div class="form-group" style="display: block; text-align: center; margin-top: 30px;">
   <input type="submit" class="btn-default" value="Agendar">
</div>

1
  • 1
    coloque um name no form name="form"
    – user60252
    7/11/2017 às 22:51

2 Respostas 2

4

coloque um name no form name="form"

function soma() {
 if (form.soma1.value == 14) {
     console.log("soma correta");
 }else{
     console.log("por favor informe o valor correto da soma");
     //para evitar o submit
     return false;
 }	 
}
<form name="form" action="envia.php" method="post" class="form"  onSubmit="return soma();">
<h2 class="text-center" style="font-size: 24px;">teste</h2>
<p class="text-center" style="font-size: 16px; ">Basta preencher o formulário abaixo</p>
<div class="form-group" style="margin-top: 40px;">
   <label>Nome*</label>
   <input type="text" name="nome" class="form-control" required>
</div>
<div class="form-group">
   <label>Email*</label>
   <input type="text" name="email" class="form-control" required>
</div>
<div class="form-group">
   <label>Celular*</label>
   <input type="text" name="cel" class="form-control" required>
</div>
<div class="form-group">
   <label>Cidade*</label>
   <input type="text" name="cidade" class="form-control" required>
</div>
<div class="form-group">
   <label>3 + 11 = ?</label>
   <input type="text" name="soma1" value="" class="form-control" required>
</div>
<div class="form-group" style="display: block; text-align: center; margin-top: 30px;">
   <input type="submit" class="btn-default" value="Agendar">
</div>
</form>

Outra forma: pelo id do elemento

script if (document.getElementById("soma1").value == 14){

HTML <input type="text" id="soma1" name="soma1" value="" class="form-control" required>

function soma() {
 if (document.getElementById("soma1").value == 14){
 	alert("soma correta");
 }else{
 	alert("por favor informe o valor correto da soma");
 	return false;
 }	 
}
<form action="envia.php" method="post" class="form"  onSubmit="return soma();">
<h2 class="text-center" style="font-size: 24px;">teste</h2>
<p class="text-center" style="font-size: 16px; ">Basta preencher o formulário abaixo</p>
<div class="form-group" style="margin-top: 40px;">
   <label>Nome*</label>
   <input type="text" name="nome" class="form-control" required>
</div>
<div class="form-group">
   <label>Email*</label>
   <input type="text" name="email" class="form-control" required>
</div>
<div class="form-group">
   <label>Celular*</label>
   <input type="text" name="cel" class="form-control" required>
</div>
<div class="form-group">
   <label>Cidade*</label>
   <input type="text" name="cidade" class="form-control" required>
</div>
<div class="form-group">
   <label>3 + 11 = ?</label>
   <input type="text" id="soma1" name="soma1" value="" class="form-control" required>
</div>
<div class="form-group" style="display: block; text-align: center; margin-top: 30px;">
   <input type="submit" class="btn-default" value="Agendar">
</div>
</form>

Existe ainda mais uma forma:

Visto que, por conceito, pode haver mais de um formulário em um documento, os formulários são armazenados em arrays na propriedade document.forms[]. Um numero de índice dentro dos colchetes aponta para um dos elementos no array. Para acessar o primeiro formulário em um documento, a referencia é: document.forms[0]

Caso seu formulário seja o primeiro do documento seu script seria assim:

function soma() {
 if (document.forms[0].soma1.value == 14){
    console.log("soma correta");
 }else{
    console.log("por favor informe o valor correto da soma");
    return false;
 }   
}

HTML

<form action="envia.php" method="post" class="form"  onSubmit="return soma();">
...........
...........
<div class="form-group">
   <label>3 + 11 = ?</label>
   <input type="text" name="soma1" value="" class="form-control" required>
</div>
<div class="form-group" style="display: block; text-align: center; margin-top: 30px;">
   <input type="submit" class="btn-default" value="Agendar">
</div>
</form>
2
  • agora entendi muito melhor, vou implementar dessa forma. só gostaria de saber se a forma que coloquei direto passando por form.soma1.value é uma má pratica? 8/11/2017 às 10:01
  • 1
    @AndersonGaldino, essas são as formas de acessar as propriedades e métodos do objeto document com javascript, portanto não é má pratica.
    – user60252
    8/11/2017 às 14:07
1

segue mais uma alternativa, utilizando uma validação com HTML5.

var soma = document.getElementById("soma");
soma.addEventListener("input", function (e) {
  var msg = "";
  if (!e.target.value)
    msg = "por favor informe um resultado para a soma";
  else if (!/(14)/.test(e.target.value))
    msg = "por favor informe o resultado correto para a soma";
  e.target.setCustomValidity(msg)
});
soma.dispatchEvent(new Event("input"));
<form action="#" method="post" class="form">
  <div>
    <label>3 + 11 = ?</label>
    <input id="soma" type="text" required>
  </div>
  <div>
    <input type="submit" value="Agendar">
  </div>
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .