tengo 20 inputs en mi html y cada input tiene un id diferente, entonces antes de mandar al backend obtengo con getElementById
el valor de cada div
por lo que repito el getElementById
20 veces y verifico que sea diferente de vacio, como puedo obtener los valores de manera mas sencilla verificando que no sean vacios?
3 respuestas
Puedes utilizar los atributos nativos de HTML añadiendo a cada input el atributo required
y si estás usando ajax con jQuery puedes usar preventDefault
para evitar que se ejecute el comportamiento normal del submit
y tengas los beneficios del form cómo presionar enter
para enviar el formulario y demás.
ejemplo:
$("#formulario").submit(event => {
event.preventDefault();
alert("formulario comprobado");
// ejecutar ajax o cualquier cosa
})
<form id="formulario">
<input type="text" required><br>
<input type="email" required><br>
<input type="number" required><br>
<button type="submit">Enviar</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-
como obtengo los valores, tengo 3 formularios, y lo estoy usando $("#formulario1, #formulario2, #formulario3 ").submit(function(e){– hubmanel 3 sep. 2018 a las 5:29
-
-
No es necesario que obtenga el valor de esa manera, ya que el navegador puede mostrar un mensaje de forma nativa, e incluso puede especificarle mediante una expresión regular que tipo de datos espera recibir el input:
El siguiente ejemplo lo explica mejor. Note, el atributo required en el input
<form action="/action_page.php">
Username: <input type="text" name="usrname" required>
<input type="submit" maxlenght="5">
</form>
El siguiente ejemplo hace uso del atributo pattern, el cual le permite especificar el formato de texto que deberá aceptar su input:
<form action="/action_page.php">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
Este ejemplo obliga al usuario a ingresar caracteres de A hasta Z, mayúsculas o minúsculas, y como máximo 3.
En cuanto al archivo PHP, en vez de obtener el valor de cada input uno a uno puede enviarlos todos, así, aunque sean 10000 inputs el código siempre será sostenible.
En este ejemplo, se envía un form con sus inputs en forma de arreglo:
<form action="demoform.php" method="get">
<input type="checkbox" name="como[]" id="como1" value="Web">
<label for="como1">Una web</label>
<input type="checkbox" name="como[]" id="como2" value="Google">
<label for="como2">Google</label>
<input type="checkbox" name="como[]" id="como3" value="Anuncio en prensa">
<label for="como3">Anuncio en prensa</label>
<input type="checkbox" name="como[]" id="como4" value="Anuncio en tv">
<label for="como4">Anuncio en tv</label>
<button type="submit">Enviar</button>
</form>
Note como cada input pertenece a un mismo arreglo, esto es necesario para poder recibir los valores del lado del servidor:
if ( !empty($_GET["como"]) && is_array($_GET["como"]) ) {
echo "<ul>";
foreach ( $_GET["como"] as $como ) {
echo "<li>";
echo $como;
echo "</li>";
}
echo "</ul>";
}
Hacer uso de buenas prácticas como estas en sus proyectos, hará que estos sean sostenibles y escalables. Espero haberle ayudado,
Suerte!
-
con poner a cada input la palabra required solucionaria mi problema?– hubmanel 3 sep. 2018 a las 4:04
-
Por supuesto! Aquí puede ver como funciona. w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required Recuerde marcar la mejor respuesta como válida, ya que así ayudará a otras personas con el mismo problema en el futuro.Éxitos. el 3 sep. 2018 a las 4:06
-
-
1se puede hacer aún así puedes usar un
preventDefault()
con jQuery el 3 sep. 2018 a las 4:09 -
@EmilianoPamont pero con required? el preventDefault lo uso pero sin required asi como la respuesta de rubenHernandez– hubmanel 3 sep. 2018 a las 4:12
Puede hacerlo con JQuery
$("input").each(function(){
if($(this).val()==""){
alert("vacio");
return false;
}
});
Con each los recorres uno a uno y vas validando u obteniendo los datos
var arreglo=new Array();
$("input").each(function(){
if($(this).val()!="") arreglo.push($(this).val());
});
Si deseas agregar los espacios por este metodo
var arreglo=new Array();
$("input").each(function(){
if($.trim($(this).val())!="") arreglo.push($(this).val());
});
Saludos :)
-
Este resultado no siempre funcionará porque comprueba que el valor de los inputs no sea
==""
pero por ejemplo si el valor de un input es==" "
no hará nada, es mejor hacerlo con utilidades nativas cómo poner required pues validará lo que se tenga que validar dependiendo del tipo de input el 3 sep. 2018 a las 4:00 -
Tienes razón tendríamos que validar también el espacio o usar alguna función como $.trim() Saludos :) el 3 sep. 2018 a las 4:01