Do not send Form by pressing submit button [duplicate]

0

Dear,

I am making a normal form with name, rut and last name.

I am sending the form with a button, but when the data is not validated the same form is sent. so my question is.

  

Is there a javaScript function that stops the button submit to   fail the validation?.

function sendForm(){
    alert("ENTRO SEND");
    alert("valido: "+valido);
     if(valido){
    	alert("valido TRUE");
    	validateSetDataAhorro();
    }else{
    	alert("valido FALSE");
    	return false;
    }
}
<form action="http://algunsitio.com/prog/usuarionuevo" method="post">
  <p>
    <label for="nombre">Nombre: </label>
          <input type="text" id="nombre"><br/>
    <label for="apellido">Apellido: </label>
          <INPUT type="text" id="apellido"><br/>
    <label for="email">Rut: </label>
          <INPUT type="text" id="email"><br/>
    <button onclick="javascript:sendForm();" class="btn btn-second"          
      title="Continuar">Boton</button>
  </p>
 </form>
    
asked by Stevn 25.05.2017 в 16:14
source

3 answers

4

If you leave the button outside the form it will not send it, then validate the fields (I have not done any validation), if the variable valido is correct it will send the form with submit() of javascript otherwise it shows an alert to validate the fields. Try changing the variable from false to true to see how it works for you.

function sendForm() {
  var valido = false; //DEBERIAS REALIZAR LAS VALIDACIONES
  alert("ENTRO SEND");
  alert("valido: " + valido);
  if (valido) {
    document.getElementById("myForm").submit();
  } else {
    alert("VALIDA LOS CAMPOS");
    return false;
  }
}
<form id="myForm" action="pagina.php" method="post">
  <p>
    <label for="nombre">Nombre: </label>
    <input type="text" id="nombre"><br/>
    <label for="apellido">Apellido: </label>
    <INPUT type="text" id="apellido"><br/>
    <label for="email">Rut: </label>
    <INPUT type="text" id="email"><br/>

  </p>
</form>
<button onclick="javascript:sendForm();" class="btn btn-second" title="Continuar">Boton</button>
    
answered by 25.05.2017 / 16:31
source
0

I do not see any submit button, so you do not need anything to cancel.

You really have a normal button that makes a javascript call. In the correct case, said javascript will have to do the submit of the form, or an Ajax call or whatever corresponds.

    
answered by 25.05.2017 в 16:37
0

The logic you're driving is fine. You have a submit button and in the click event

<button onclick="javascript:sendForm();" class="btn btn-second"          
      title="Continuar">Boton</button>

Call the sendForm () function.

The problem is that the valid variable is not defined, how do you know that the form is valid ?. It may only be that it has values (if so, you can validate it with required in the input).

You must work with the valid variable, which you are going to validate and in that way you would only be sending the form when the form data has been validated in the client.

A basic way to validate if the input has value is

<form>
<input type="text" id="txtNombre" required>
<button type="submit">
</form>

In this code the browser validates that the input field has value, if so, it proceeds to send it, otherwise it asks for it.

Greetings,

    
answered by 25.05.2017 в 16:34