Home / Questions / 73083
Accepted
Stevn
Asked: 2020-05-26 06:14:45 +0800 CST 2020-05-26 06:14:45 +0800 CST

Do not submit Form when pressing submit button [duplicate]

  • 772

Dear All,

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

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

Is there a javaScript function that stops the submit button when validation fails?

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>

javascript

3 Answers

  1. Best Answer

    If you leave the button out of the form it will not send it, then you validate the fields (I have not done any validation), if the variable validois correct it will send the form with submit()javascript, otherwise it shows an alert for you to validate the fields. Try changing the variable from falseto trueto 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>

    • 4

  2. The logic you are 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>

    You 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 be that it only has values ​​(if so, you can validate it with required in the input).

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

    A basic way to validate if the inputs have value is

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

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

    Cheers,

    • 0

  3. I don't see any submit button, so you don't need anything to cancel.

    You actually 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.

    • 0