0

Hola estoy haciendo un sistema en el cual asigno un aprobador a un proyecto pero no es obligatorio asignar un aprobador por eso lo hago por medio de un radionButtom, si la persona selecciona SI se desglosan tres campos y si es NO se ocultan esos campos eso ya logre hacerlo, pero el problema es que cuando la selección del radioButtom sean Si quiero que los tres campos que se desglosan sean obligatorios y si es No no sean obligatorios.

Ojala alguien pueda ayudarme, anexo el código.

                                <div class="form-group input-group">
                                <span class="input-group-addon">Asignar Aprobador: </span>
                                <p:selectOneRadio class="form-control" onclick="show(this.value)" value="#{projectsBean.proyectos.approver}" >
                                    <f:selectItem itemLabel="Si"  itemValue="Si"/>
                                    <f:selectItem itemLabel="No"  itemValue="No" >
                                    </f:selectItem>

                                </p:selectOneRadio>
                            </div>

                            <div class="form-group input-group" style="display:none"  id="ar">
                                <span class="input-group-addon">* Área del aprobador: </span>
                                <h:selectOneMenu class="form-control" id="area"  value="#{projectsBean.area}" requiredMessage="* Obligatorio - Área">
                                    <f:selectItem itemLabel="-- Seleccionar --" itemValue="#{null}"/>
                                    <f:selectItems value="#{loginBean.listAreas}"/>
                                    <f:ajax execute="area" render="role"/>
                                </h:selectOneMenu>
                            </div>

                            <div class="form-group input-group" style="display:none" id="rol">
                                <span class="input-group-addon">* Rol del aprobador: </span>
                                <h:selectOneMenu class="form-control" id="role"  value="#{projectsBean.rol}" requiredMessage="* Obligatorio - Rol">
                                    <f:selectItem itemLabel="-- Seleccionar --" itemValue="#{null}"/>
                                    <f:selectItems value="#{projectsBean.listRol}"/>
                                    <f:ajax execute="role" render="perso"/>
                                </h:selectOneMenu>
                            </div>

                            <div class="form-group input-group" style="display:none" id="per">
                                <span class="input-group-addon">* Nombre del aprobador </span>
                                <h:selectOneMenu class="form-control" id="perso" value="#{projectsBean.aprovador}" requiredMessage="* Obligatorio - Nombre de la Persona">
                                    <f:selectItem itemLabel="-- Seleccionar --" itemValue="#{null}"/>
                                    <f:selectItems value="#{projectsBean.listEmpleado}"/>
                                </h:selectOneMenu>
                            </div> 

Este es el script que muestra y oculta los campos

          <script type="text/javascript">

            function show(type) {
                switch (type) {
                    case 'No' :
                        document.getElementById("ar").style.display = "none";                  
                        document.getElementById("rol").style.display = "none";
                        document.getElementById("per").style.display = "none";
                        break;
                    case 'Si' :
                        document.getElementById("ar").style.display = "block";
                        document.getElementById("rol").style.display = "block";
                        document.getElementById("per").style.display = "block";

                        break;
                }
            }

        </script> 
0

1 respuesta 1

0

Cuando los ocultas o haces aparecer, hay que quitarle/agregarle el atributo required

  function show(type) {
            switch (type) {
                case 'No' :
                    document.getElementById("ar").style.display = "none"; 
                    document.getElementById("ar").required = false;
                    document.getElementById("rol").style.display = "none";
                    document.getElementById("rol").required = false;
                    document.getElementById("per").style.display = "none";
                    document.getElementById("per").required = false;

                    break;
                case 'Si' :
                    document.getElementById("ar").style.display = "block";
                    document.getElementById("ar").required = true;
                    document.getElementById("rol").style.display = "block";
                    document.getElementById("rol").required = true;
                    document.getElementById("per").style.display = "block";
                    document.getElementById("per").required = true;

                    break;
            }
        }

Fuente: https://www.w3schools.com/jsref/prop_text_required.asp

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.