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
    Commented el 8 sept. 2022 a las 10:03
  • @masterguru listo! Commented el 8 sept. 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! Commented el 8 sept. 2022 a las 12:55

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.