Validating Value

Question

Validating Value

Navigation

#1 by (4 votes)
#2 by (1 votes)

2

I need to validate a value before it is sent, how do I validate it before sending it, because it is already sending it 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>

javascript html5

asked by anonymous 07.11.2017 / 23:44

2 answers

1

One more alternative, using HTML5 validation.

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>

08.11.2017 / 15:35

How to use ALIASES in Oracle correctly? SQL distinct with sum

score 4 · Accepted Answer

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

Another 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 yet another way:

Since, by concept, there may be more than one form in a document, the 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 one in the document your script would look 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>