Validating Valor

Question

I needed to validate a value before it was sent, as I do for it to be validated before sending, because it is already sending the value directly without validating the sum of the 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>

Answer 1

put a name in the 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>

Other way: by element id

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>

There is one more way:

Since, by concept, there may be more than one form in a document, forms are stored in arrays in the Document.Forms[] property. An index number inside the brackets points to one of the elements in the array. To access the first form in a document, the reference is: document.forms[0]

If your form is the first of the document your script would be like this:

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>

Answer 2

follows another alternative, using a validation with 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>