Display an alert message

Navigation
0

I am making a form where I have two fields that are required, in this case they are name and email. What happens is that these fields must be full, but even if they are not, if I press the send button, the alert sent will jump. What I need to do is that if these fields are not full, do not show this sent alert, when you click the send button. Together code.

They are already set with the required attribute, but what happens is that if you press the send button it sends one, what you need is to validate if the email fields and names are valid and then when you click send send sent. It would be something as long as those fields are not full, block the send button. Thank you. 

<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>
    
asked by Joaquin 14.07.2018 в 19:16
source

2 answers

0

If you are only going to use js you can put a condition in your hizoclick() function to check if any of the fields are empty, for example: 

<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>

On the other hand, if you are also going to work with php as Carmen told you, you would have to use the event onsubmit() to do a custom validation with js, although if you already use required and only want to check that they are not empty, the fields would not The hizoclick function is missing, for example: 

<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">
    
answered by 14.07.2018 / 19:52
source
0

Example using the onsubmit of the form. It is done with return, so that if the result of the function is true the form is sent and if it is false no. You can combine it with the attribute requires validation of HTML5 forms, taking into account that this validation is done first and then the one that you add in the function. 

<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>
    
answered by 15.07.2018 в 00:33
dxlookup: Problem with remote source and onValueChanged Convert java.util.Date to java.sql.Date