-2

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>

6
  • 2
    Leí la pregunta dos veces y de verdad que creo que no te has tomado el tiempo de explicar cuál es el problema o qué es lo que quieres lograr. Por favor lee Cómo preguntar.
    – jachguate
    Commented el 11 jul. 2023 a las 22:12
  • 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 Commented el 11 jul. 2023 a las 23:37
  • 1
    Entonces por favor dale clic en editar la pregunta y di eso, para comenzar. Es información vital que no debiera quedar en comentarios.
    – jachguate
    Commented el 11 jul. 2023 a las 23:42
  • ok, ya esta editada Commented el 11 jul. 2023 a las 23:44
  • No entiendo por qué adjuntas dos códigos distintos... Commented el 12 jul. 2023 a las 0:58

2 respuestas 2

0

Me estoy basándo en el segundo ejemplo que das en el código, con algunos cambios:

  • Asigno un ID a cada input que se va creando, solo por costumbre.
  • Asigno un nombre diferente a cada input, y ese nombre coincide con la etiqueta que se le va poniendo (incluyendo el que ya existe en HTML).
  • Uso ese nombre para indicar qué input es el que falla.
  • Termino el ciclo con la condición <=, de otra manera no se evalúa el último input.
  • Si sale del ciclo, muestro un mensaje indicando que todo está OK antes de que ocurra el submit.

var counter = 0;
function addInput(divName) {
  counter++; 
  var Ai8ousa = document.createElement('div'); 
  Ai8ousa.innerHTML = "Field: "+(counter+1) + "<input type='text' name='field " + (counter+1) + "' id='field" + (counter+1) + "'>";   
  document.getElementById(divName).appendChild(Ai8ousa);
}

function validations(form) {
  var field;
  var i=0;
  do{
    field=form[i];
    if (field.value=='') {
      field.focus();
      alert('The field ' + field.name + ' is blank, please enter a value!');
      return false;
    }
    i++;
  } while( i <= counter);
  alert("everything is OK, submiting the form!");
}
<form action="" method="post" onsubmit="return validations(this)" >
  <div id="dynamicInput">
    <div>Field : <input type="text" name="field 1" id="field1" /></div>
  </div>
  <input type="button" value="New field" onClick="addInput('dynamicInput');">
  <input type="submit" value="Submit" />
</form>

0

Veo que al generar inputs dinámicos, lo más factible podría ser asignarle un id dinámico, para que tengas control por cada uno que generes, también podrías realizarlo con una clase, para que puedas iterar por cada uno de los input que generes, te dejo un ejemplo que aplican ambos enfoques.

function addInput() {
      //Contenedor Dinámico
      var div = document.getElementById('dynamicInput');
      var id = div.children.length + 1;
      var Ai8ousa = document.createElement('div');
      Ai8ousa.innerHTML = `Field ${id}: <input type='text' id='dynamic${id}' class='dynamic'>`;
      div.appendChild(Ai8ousa);
    }

    function validations() {
      //Obtenemos todos los select con la clase dynamic
      var elemento = document.querySelectorAll('.dynamic');
      for (var i = 0; i < elemento.length; i++) {
        //Obtenemos el valor del input y validamos
        var valor = elemento[i].value;
        if (valor === "") {
          var fieldNumber = i + 1;
          alert(`The field ${fieldNumber} is null!!!`);
          //Mediante el id dinámico podemos setear el focus al input text vacio
          var input = document.getElementById(`dynamic${fieldNumber}`);
          input.focus();
          return false;
        }
      }
    }
<form action="" method="post" onsubmit="return validations()">
    <div id="dynamicInput">
      <div>Field 1:
        <input type="text" id='dynamic1' class="dynamic" />
      </div>
    </div>
    <input type="button" value="New field" onClick="addInput();">
    <input type="submit" value="Submit" />
  </form>

Con esto puedes tener una base para realizar distintas operaciones dependiendo de lo que requieras.

Tu Respuesta

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

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