0

Tengo varios inputs que son opcionales hasta que una clase css sea activada, como podría hacer que esos inputs sean required cuando el estilo este aplicado?

El código luce así:

 <div style="margin:25 0 25 0 ;">
            <div class="pago_button" id="pago1" onclick="pago_change(this.id), metodopago('Cuenta')">Banco
            </div>
            <div class="pago_button" id="pago2" onclick="pago_change2(this.id), metodopago('Tarjeta')">Tarjeta
            </div>
            <div class="pago_button" id="pago3" onclick="pago_change3(this.id)">Paypal
            </div>
            
        </div>

        <select class="form-control hidden_value" name="metpag">
            <option id="metodopagoactual" name="metpag"></option>
        </select>

        <div id="banco" class="pago_off form-group col-md-12">
            <br>
            <label for="codpais" style="width:15%; margin-bottom:5px ; text-align: center;">Cod. Pais</label>
            <br>
            <input class="form-control" style=" width:15%; float: left;" type="text" class="form-control" id="codpais" name="codpais" placeholder="ES" maxlength="2" />
            <label for="dciban" style="text-align: center;  width:15%; margin-top:-30px ;">DCIBAN</label>
            <br>
            <input class="form-control" style="width:15%; float: left;" type="number" class="form-control" id="dciban" name="dciban" placeholder="62" maxlength="2" />
            <label for="entidad" style="text-align: center; width:15%; margin-top:-30px ;">Entidad</label>
            <br>
            <input class="form-control" style="width:15%; float: left;" type="number" class="form-control" id="entidad" name="entidad" placeholder="9999" maxlength="4" />
            <label for="oficina" style="text-align: center;  width:15%; margin-top:-30px ;">Oficina</label>
            <br>
            <input class="form-control" style="width:15%; float: left;" type="number" class="form-control" id="oficina" name="oficina" placeholder="1234" maxlength="4" />
            <label for="dcontrol" style="text-align: center;  width:15%; margin-top:-30px ;">DC</label>
            <br>
            <input class="form-control" style="width:15%; float: left;" type="number" class="form-control" id="dcontrol" name="dcontrol" placeholder="96" maxlength="2" />
            <label for="ncuenta" style=" text-align: center;  width:25%; margin-top:-30px ;">NºCuenta</label>
            <br>
            <input class="form-control" style="width:25%; float: left;" type="number" class="form-control" id="ncuenta" name="ncuenta" placeholder="1234567890" maxlength="10" />
        </div>

y el js:

//cambiar pago
function metodopago(valor){
document.getElementById("metodopagoactual").value = valor
}


  // forma pago

function pago_change(id)
{
  document.getElementById(id).setAttribute("class", 
 "pago_button_active");
 document.getElementById("pago2").setAttribute("class", "pago_button");
 document.getElementById("pago3").setAttribute("class", "pago_button");
 document.getElementById("banco").setAttribute("class", "pago_on");


}

   function pago_change2(id)
  {
 document.getElementById(id).setAttribute("class", 
  "pago_button_active");
 document.getElementById("pago1").setAttribute("class", "pago_button");
 document.getElementById("pago3").setAttribute("class", "pago_button");
 document.getElementById("banco").setAttribute("class", "pago_off");
 }

 function pago_change3(id)
 {
   document.getElementById(id).setAttribute("class", 
 "pago_button_active");
 document.getElementById("pago2").setAttribute("class", "pago_button");
 document.getElementById("pago1").setAttribute("class", "pago_button");
 document.getElementById("banco").setAttribute("class", "pago_off");
}

Por ejemplo cuando selecciono el div con el id "pago1" el div id "banco" cambia la clase css de "pago_off" a "pago_on", en ese caso, cuando el div tenga la clase pago_on quiero que todos los imputs dentro del div sean required, pero si esta en pago_off no sean required.

¡Gracias por las respuestas!

2
  • Lo que quieres debería hacerse en javascript, pero no has puesto el código de tus funciones pago_change*, que son las que necesitamos modificar para conseguir tu proposito. Edita la pregunta agregando lo que falta para una mejor ayuda.
    – masterguru
    el 8 sep. 2022 a las 10:03
  • @masterguru listo! el 8 sep. 2022 a las 10:27

1 respuesta 1

1

Tal como lo tienes yo haria algo así con una nueva función que contemplara los dos casos (agregar o quitar el required):

function inputsToggle(action = "not required") {
 inputs = document.getElementById("banco").getElementsByTagName('input')
 for(let i = 0; inputs.length > i; i++) {
   if(action == "required") {
        inputs[i].setAttribute("required", "required");
   } else {
        inputs[i].removeAttribute("required");
   }
 }
}

y luego invocar a esa función acorde lo esperado en cada caso, por ejemplo:

function pago_change(id)
{
 document.getElementById(id).setAttribute("class", "pago_button_active");
 document.getElementById("pago2").setAttribute("class", "pago_button");
 document.getElementById("pago3").setAttribute("class", "pago_button");
 document.getElementById("banco").setAttribute("class", "pago_on");
 inputsToggle('required')
}
function pago_change2(id)
  {
 document.getElementById(id).setAttribute("class", "pago_button_active");
 document.getElementById("pago1").setAttribute("class", "pago_button");
 document.getElementById("pago3").setAttribute("class", "pago_button");
 document.getElementById("banco").setAttribute("class", "pago_off");
 inputsToggle()
}

Ya nos dirás si te sirve.

Explicación:

Establecemos una nueva función que busca todos los input contenidos en el div con el id banco, y los recorremos uno a uno y agregamos o quitamos el required tal como venga dado en su parámetro (si no hay parámetro se entiende que no es required, por lo tanto debe eliminarse el required).

1
  • funciona perfectamente, ¡gracias! el 8 sep. 2022 a las 12:55

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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