0

Estoy haciendo un formulario donde tengo dos campos que son requeridos, en este caso son nombre y email. Lo que sucede es que dichos campos deben estar llenos, pero aunque no lo esten si apreto el boton de enviar igual salta la alerta enviado. Lo que necesito hacer es que si no estan llenos dichos campos, no muestre dicha alerta de enviado, al momento de dar click al botón de enviar. Ajunto codigo.

Ya estan puestos con el atributo required, pero lo que sucede es que si apretas el boton enviar pone enviado de una, lo que necesitaria es validar si los campos email y nombres son validos y luego al apretar enviar muestre enviado. Seria algo como mientras no esten llenos esos campos bloquear el boton enviar. Gracias.

<form action="no_existe.html" method="get">
   <fieldset>
  <legend>Datos</legend>
    Nombre y apellido (máximo 20 caracteres) <input type="text"  placeholder="Ingrese su nombre" maxlength="20" required> <br> 
              
    Correo <input type="email" placeholder="Email" required> <br> 
                
    <input type="submit" class="button" name="enviar" onclick="hizoClick()" value="Enviar">
          
<script>
function hizoClick() {
  alert("Enviado");
}
</script>

3
  • Estás detectando el click, pero no hay envío, el submit no llega a completarse, es posterior al click y al no estar rellenos los campos no se envía. Tu alerta no es correcta, hacer click no implica que se envíe. Si necesitas alertas personalizadas se pueden hacer en el onsubmit, es el caso?
    – Carmen
    el 14 jul. 2018 a las 17:32
  • Si, necesito usar el onsubmit
    – Joaquin
    el 14 jul. 2018 a las 19:03
  • he añadido un ejemplo de validación en onsubmit para que lo tengas, aunque ya hayas dado por válida una respuesta.
    – Carmen
    el 14 jul. 2018 a las 22:35

2 respuestas 2

0

Si solo vas a usar js puedes poner una condición en tu función hizoclick() para comprobar si alguno de los campo está vacío, por ejemplo:

<form action="no_existe.html" method="get">
   <fieldset>
  <legend>Datos</legend>
    Nombre y apellido (máximo 20 caracteres) <input type="text"  placeholder="Ingrese su nombre" maxlength="20" id="nombre" required> <br> 
              
    Correo <input type="email" placeholder="Email" id="correo" required> <br> 
                
    <input type="submit" class="button" name="enviar" onclick="hizoClick()" value="Enviar">
          
<script>
function hizoClick() {
  var nombre = document.getElementById("nombre").value;
  var correo = document.getElementById("correo").value;
  if (nombre == "" || correo == "") {
      alert("Debes compeltar ambos campos"); 
  } else {
  alert("Enviado");
  }
}
</script>

En cambio si también vas a trabajar con php como te ha dicho Carmen tendrías que usar el evento onsubmit() para hacer una validación personalizada con js, aunque si ya usas required y solo quieres comprobar que no estén vacíos los campos no haría falta la función hizoclick, por ejemplo:

<form action="no_existe.html" method="get">
   <fieldset>
  <legend>Datos</legend>
    Nombre y apellido (máximo 20 caracteres) <input type="text"  placeholder="Ingrese su nombre" maxlength="20" id="nombre" required> <br> 
              
    Correo <input type="email" placeholder="Email" id="correo" required> <br> 
                
    <input type="submit" class="button" name="enviar" value="Enviar">   

0

Ejemplo usando el onsubmit del formulario. Se hace con return, de modo que si el resultado de la función es verdadero el formulario se envía y si es falso no. Puedes combinarlo con el atributo requiere de validación de formularios de HTML5, teniendo en cuenta que primero se hace esta validación y luego la que tú añades en la función.

<form action="no_existe.html" method="get" onsubmit="return Comprobar();">
   <fieldset>
  <legend>Datos</legend>
    Nombre y apellido (máximo 20 caracteres) <input type="text"  placeholder="Ingrese su nombre" maxlength="20" id="nombre" name="nombre"> <br> 
              
    Correo <input type="email" placeholder="Email" id="email" name="email"> <br> 
                
    <input type="submit" class="button" name="enviar" value="Enviar">
          
<script>
function Comprobar() {
  if (document.getElementById("nombre").value=="") {
    alert("Debes rellenar el nombre"); 
    return false;
  }
  if (document.getElementById("nombre").value.length<5) {
    alert("El nombre debe tener al menos 5 caracteres"); 
    return false;
  }
  if (document.getElementById("email").value=="") {
    alert("Debes poner un email"); 
    return false;
  }
  return true;
}
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.