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!
pago_change*
, que son las que necesitamos modificar para conseguir tu proposito. Edita la pregunta agregando lo que falta para una mejor ayuda.