Home / Questions / 9219
Accepted
Diego
Asked: 2020-05-06 12:03:37 +0800 CST 2020-05-06 12:03:37 +0800 CST

JS function is not called on form submit

  • 772

I have a form that when submitted calls a function, but doesn't call the valida_envia().

I have the scripts in different files, I call the function valida_envia()that is located in a file.js

This is my code (also available on JSFiddle )

function valida_envia() {

  //Definimos los caracteres permitidos en una dirección de correo electrónico
  var regexp = /^[0-9a-zA-Z._.-]+\@[0-9a-zA-Z._.-]+\.[0-9a-zA-Z]+$/;

  //Validamos un campo o área de texto, por ejemplo el campo nombre
  if (document.form.nombre.value.length == 0) {
    alert("Tiene que escribir su nombre");
    document.form.nombre.focus();
    return 0;
  }

  if ((regexp.test(document.form.email.value) == 0) || (document.form.email.value.length = 0)) {
    alert("Introduzca una dirección de email válida");
    document.form.email.focus();
    return 0;
  } else {
    var c_email = true;
  }

  document.form.submit();
}
<form name="Formulario" action="[email protected]" method="post" onsubmit="return valida_envia()">
  name:
  <br>
  <input type="text" id="nombre" name="nombre">
  <br> email:
  <br>
  <input type="text" id="email" name="email">

  <input type="submit" value="Enviar">

</form>

javascript

3 Answers

  1. Best Answer

    If you review the example jsfiddleyou will see that you must change where you place the function

    enter image description here

    in your example you have defined it inside the onLoadand that is incorrect, only it in the<head>

    Edit the jsfiddle and save the updates, I also put here the example applying the validations

    function valida_envia() {

  //Definimos los caracteres permitidos en una dirección de correo electrónico
  var regexp = /^[0-9a-zA-Z._.-]+\@[0-9a-zA-Z._.-]+\.[0-9a-zA-Z]+$/;

   var nombre = document.getElementById('nombre');
   var email = document.getElementById('email');
   
  //Validamos un campo o área de texto, por ejemplo el campo nombre
  if (nombre.value.length == 0) {
    alert("Tiene que escribir su nombre");
    nombre.focus();
    return false;
  }

  if ((regexp.test(email.value) == 0) || (email.value.length = 0)) {
    alert("Introduzca una dirección de email válida");
    email.focus();
    return false;
  } else {
    var c_email = true;
  }

  document.Formulario.submit();
  
  return true;
}
    <form name="Formulario" action="[email protected]" method="post">
  name:
  <br>
  <input type="text" id="nombre" name="nombre">
  <br> email:
  <br>
  <input type="text" id="email" name="email">

  <input type="button" value="Enviar" onclick="return valida_envia();">

</form>

    • 2

  2. In the case of the JSFiddle, the function is not called because you have the JS code running "onLoad". This causes the function to go inside another function ( $(document).ready(function() {})) and its scope is limited to within that function. If you change the mode to "No wrap - in <head>" then the function will be calledvalida_envia .

    Now, inside that function there are a number of errors:

    • document.form.nombreand document.form.emailare invalid and give an error, you should use a different notation likedocument.getElementById("nombre") ordocument.form["nombre"]
    • You don't return 0 or 1. When you return a number, the second number return(the one inlined in the form) interprets 0 as "0", which is not an empty string and so is true and the form will be submitted. Instead it returns true or false .

    With those changes the code would look like this (you can also see it in JSFiddle ):

    function valida_envia(e) {

  //Definimos los caracteres permitidos en una dirección de correo electrónico
  var regexp = /^[0-9a-zA-Z._.-]+\@[0-9a-zA-Z._.-]+\.[0-9a-zA-Z]+$/;

  //Validamos un campo o área de texto, por ejemplo el campo nombre
  if (document.getElementById("nombre").value.length == 0) {
    alert("Tiene que escribir su nombre");
    document.getElementById("nombre").focus();
    return false;
  }

  if ((regexp.test(document.getElementById("email").value) == 0) || (document.getElementById("email").value.length = 0)) {
    alert("Introduzca una dirección de email válida");
    document.getElementById("email").focus();
    return false;
  } else {
    var c_email = true;
  }

  return true;

}
    • 2

  3. There are two main problems:

    • document doesn't have a form property, what you have is a forms collection so instead of accessing the form elements with document.form.name you could do it with document.forms[0].name (as long as it's the only form of the document)
    • On the other hand, if it does not pass the validation, you should return false instead of 0 and, if it passes, you should return true instead of submitting the form (the effect is the same but it is cleaner).
    • 0