Home » Java » javascript – ¿Cómo hacer campos obligatorios con base a la elección de un radioButtom?-Exceptionshub

javascript – ¿Cómo hacer campos obligatorios con base a la elección de un radioButtom?-Exceptionshub

Posted by: admin February 25, 2020 Leave a comment

Questions:

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> 
How to&Answers: