5 Replies Latest reply: May 28, 2012 7:48 AM by Subramanian Meyyappan RSS

    How to set focus on the input text field

    Gopal Aggarwal
      Hi,

      I am implementing a registration form in the application. I am using the property required="true" for the mandatory fields.

      Scenario : When user clicks on the register button(Command button) without filling all mandatory fields. The ADF pop-up appears containing the detail about the empty fields with an OK button.

      1. On click of OK button in the pop-up I have to set the focus to the first empty field from the list.
      OR
      2. Instead of pop-up containing the list of empty field, the error message should come next to the field.

      Please help me if any possible solution is there as per the requirement.

      Regards,
      Gopal Aggarwal

      Edited by: Gopal Aggarwal on May 28, 2012 4:16 AM
        • 1. Re: How to set focus on the input text field
          in the line of fire
          One way to do is trap the OK button clicked in the BB, use ExtendedRenderer Kit to setfocus to the component.
          • 2. Re: How to set focus on the input text field
            umesh.agarwal
            See if it helps you:
            http://adfjsf.blogspot.in/2011/02/controlling-message-display-style-in.html

            You can add af:messages tag at the begining of your page, to show all the messages at the left top corner.
            • 3. Re: How to set focus on the input text field
              Subramanian Meyyappan
              dear user
              umesh suggested
              well, a worthful example, the example will show all in top of the form,so you should make some around on it
              How to set focus on the input text field
              following code snippet
              this will not allow user focus to next field if the mandatory field is empty

              one.jspx code
              <af:inputText value="#{bindings.ProspTopic.inputValue}"
                                                      label="Topic"
                                                      required="#{bindings.ProspTopic.hints.mandatory}"
                                                      columns="21"
                                                      maximumLength="#{bindings.ProspTopic.hints.precision}"
                                                      shortDesc="#{bindings.ProspTopic.hints.tooltip}"
                                                      binding="#{backing_untitled2.it2}"
                                                      id="it2">
                                          <af:clientListener method="setFocusWhenEmptyMandatory"
                                                             type="blur"/>
                                        </af:inputText>
              
               <af:inputListOfValues id="ilov3"
                                                              popupTitle="Search and Select: #{bindings.Bu.hints.label}"
                                                              value="#{bindings.Bu.inputValue}"
                                                              label="#{bindings.Bu.hints.label}"
                                                              model="#{bindings.Bu.listOfValuesModel}"
                                                              required="#{bindings.Bu.hints.mandatory}"
                                                              columns="#{bindings.Bu.hints.displayWidth}"
                                                              shortDesc="#{bindings.Bu.hints.tooltip}"
                                                              binding="#{backing_untitled2.ilov3}"
                                                              autoSubmit="true">
                                          <f:validator binding="#{bindings.Bu.validator}"/>
                                          
                                          <af:clientListener type="blur"
                                                             method="setFocusWhenEmptyMandatoryLOV"/>
                                          <af:serverListener type="jsServerListener"
                                                            method="#{backing_untitled2.handlerMethod}"/>
                                                  
                                        </af:inputListOfValues>
              one.jspx code.
              <af:group binding="#{backing_untitled2.g1}" id="g1">
                       <![CDATA[
                          <script>
                              
                              function setFocusWhenEmptyMandatory(event) {
                                  var element = event.getSource();                   
                                  if (element.getValue() == null) {
                                      AdfFocusUtils.focusElementDelayed(element,10);
                                      event.cancel();
                                  }
                              }
                                             
                              function setFocusWhenEmptyMandatoryLOV(event) {
                                  var element = event.getSource();                   
                                  if (element.getValue() == null) {
                                      AdfFocusUtils.focusElementDelayed(element,10);
                                      AdfCustomEvent.queue(element, "jsServerListener", {}, true);
                                      event.cancel();
                                  }
                              }
                              
                              function setFocusWhenNotNumber(event) {
                                  var element = new String(event.getSource());
                                  var domElement = document.getElementById(element.substring(element.indexOf("=")+1) + "::content");
                                  if(isNaN(domElement.value)) {
                                      AdfFocusUtils.focusElementDelayed(event.getSource(),10);
                                      event.cancel();
                                  }
                              }
                              
                          </script>
                      ]]>
                      </af:group>
              • 4. Re: How to set focus on the input text field
                Gopal Aggarwal
                Hi,

                Please find the sample of the code below as I am implementing in my form. May be this will help more to understand my requirement. As you will see there are 4 input text buttons I have designed all of them are having propert required=true.

                When we click the register button without filling the fields the ADF pop-up appears with list of messages. On click of "OK" button pop-up disappears but there is no focus on any of the field as a result user has to click manually on the fields.

                I want there should be a focus set on the field listed top or instead of pop-up the message should come next to the field only.

                <?xml version='1.0' encoding='UTF-8'?>
                <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
                <af:panelGroupLayout id="pgl1" layout="vertical">
                <af:panelGroupLayout id="pgl2" layout="horizontal">
                <af:outputLabel for="it1" id="ol1" value="Name"/>
                <af:spacer width="5px" id="s1"/>
                *<af:inputText id="it1" value="#{pageFlowScope.test.name}" required="true" requiredMessageDetail="Enter name"/>*
                </af:panelGroupLayout>

                <af:panelGroupLayout id="pgl3" layout="horizontal">
                <af:outputLabel for="it2" id="ol2" value="Age"/>
                <af:spacer width="5px" id="s2"/>
                *<af:inputText id="it2" value="#{pageFlowScope.test.age}" required="true" requiredMessageDetail="Enter age"/>*
                </af:panelGroupLayout>

                <af:panelGroupLayout id="pgl4" layout="horizontal">
                <af:outputLabel for="it3" id="ol3" value="Zip code"/>
                <af:spacer width="5px" id="s3"/>
                *<af:inputText id="it3" value="#{pageFlowScope.test.zip}" required="true" requiredMessageDetail="Enter zip code"/>*
                </af:panelGroupLayout>

                <af:panelGroupLayout id="pgl5" layout="horizontal">
                <af:outputLabel for="it4" id="ol4" value="Country"/>
                <af:spacer width="5px" id="s4"/>
                *<af:inputText id="it4" value="#{pageFlowScope.test.country}" required="true" requiredMessageDetail="Enter country name"/>*
                </af:panelGroupLayout>

                *<af:commandButton text="Register" id="cb1"/>*
                </af:panelGroupLayout>
                </ui:composition>

                Regards,
                Gopal Aggarwal
                • 5. Re: How to set focus on the input text field
                  Subramanian Meyyappan
                  there is no focus on any of the field as a result user has to click manually on the fields
                  oh ho.. :(
                  did you gave look to my previous post. even though i highlighted that part as you want. :)