0

tengo un problema en mi código, estoy imprimiendo 'n' numero de veces un input con javascript en un formulario pero quiero ponerle un required para que el el formulario no se envié si los inputs están vacíos el cual no he podido logar ya que cuando presiono en enviar se envían los input vacíos.

function numeroCampos()
  {
    var numero = document.getElementById("campos").value;
    var padre = document.getElementById("inputs");
    
    while (padre.firstChild) 
    {    
      padre.removeChild(padre.lastChild);  
    }

    for(var i=1; i<=numero; i++)
    {

      //aquí agregamos el componente de tipo input
      var input = document.createElement("INPUT");

      //aquí indicamos que es un input de tipo text
      input.type = 'text';
      input.name = 'campos[]';
      input.required = 'true';

      //y por ultimo agreamos el componente creado al padre
      padre.appendChild(input);
    }

  }
<form method="POST" action="">
<p>Cuantos Inputs</p>
<select name="numerocampos" id="campos" onchange="numeroCampos()" required>
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select>
    <input type='submit' value='Enviar'>
</form>
<br>
    <div id="inputs"></div>

1 respuesta 1

1

Los input que se crean, se encuentran fuera de la etiqueta form, por eso no realiza la validación, lo que puedes hacer es meter adentro del form los input que se crean de forma dinámica.

function numeroCampos()
  {
    var numero = document.getElementById("campos").value;
    var padre = document.getElementById("inputs");
    while (padre.firstChild) {    padre.removeChild(padre.lastChild);  }
    //padre.innerHtml = "";

    for(var i=1; i<=numero; i++)
    {

      //aquí agregamos el componente de tipo input
      var input = document.createElement("INPUT");

      //aquí indicamos que es un input de tipo text
      input.type = 'text';
      input.name = 'campos[]';
      input.required = 'true';

      //y por ultimo agreamos el componente creado al padre
      padre.appendChild(input);
    }

  }
<form  id="myform" method="POST" action="">
<p>Cuantos Inputs</p>
<select name="numerocampos" id="campos" onchange="numeroCampos()" required>
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select>
    <input type='submit' value='Enviar'>

   <br>
   <div id="inputs"></div>
</form>

Así ya detecta que los input pertenecen al form y los puede validar.

1
  • es verdad con eso se soluciono...muchas gracias
    – Ferns
    Commented el 15 dic. 2020 a las 15:17

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.