quiero lograr, que cada vez que, haya un input vacío este me avise en un alert "hay campos vacíos" y además colocar el foco en un input vacío y así hasta el ultimo input vacío, si estan todos llenos de datos, el boton diga,: "se ha llenado correctamente" , en un alert
tengo este problema con inputs dinámicos se supone que todos los inputs con el atributo name txt con el botón agregar me va agregando estos input dinámicamente
por lo que se aprecia, no muestra el mensaje "campos vacios" cada vez que se hace click al boton.
cada vez que se encuentre un campo vacío debiese colocarse el foco, hacia el input vacio.
si estan todos los inputs con datos este debiese ejecutar el mensaje todos los campos llenos.
// Constantes para el div contenedor de los inputs y el botón de agregar
const contenedor = document.querySelector('#dinamic');
const btnAgregar = document.querySelector('#agregar');
// Variable para el total de elementos agregados
let total = 1;
/**
* Método que se ejecuta cuando se da clic al botón de agregar elementos
*/
btnAgregar.addEventListener('click', e => {
let div = document.createElement('div');
div.innerHTML = `<label>${total++}</label> - <input type="text" name="nombre[]" placeholder="Nombre" required><button onclick="eliminar(this)">Eliminar</button>`;
contenedor.appendChild(div);
})
/**
* Método para eliminar el div contenedor del input
* @param {this} e
*/
const eliminar = (e) => {
const divPadre = e.parentNode;
contenedor.removeChild(divPadre);
actualizarContador();
};
/**
* Método para actualizar el contador de los elementos agregados
*/
const actualizarContador = () => {
let divs = contenedor.children;
total = 1;
for (let i = 0; i < divs.length; i++) {
divs[i].children[0].innerHTML = total++;
}//end for
};
function ValidarVacios()
{
var f = document.forms['form1'];
var text = "";
var alerta = false;
for (var i = 0; i <= parseInt(f.numTexts.value); i++){
text = 'txt'
if (([text]+'.value') == ''){
alerta = true;
}
}
if (alerta==true)
{
alert('Campos Vacios');
return false;
}
else{
return true;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inputs dinámicos</title>
</head>
<body>
<button id="agregar">Agregar</button>
<div id="dinamic"></div>
<input type="submit" value="Pik 1" onclick="javascript:ValidarVacios();">
<script src="./main.js"></script>
</body>
</html>
funciona a medias si agrego 5 veces el 4to queda null, es lo mas proximo a input dinamico
var counter = 0;
function addInput(divName){
counter++;
var Ai8ousa = document.createElement('div');
Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";
document.getElementById(divName).appendChild(Ai8ousa);
}
function validations(form){
var field;
var i=0;
do{
field=form[i];
if (field.value=='')
{
alert('The field is null!!!');
return false;
}
i++;
}while(i<counter);
}
<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" /> <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />
</form>