Fri. Apr 23rd, 2021

Requirement: The requirement is to show FacesMessage using JavaScript. When the user types in the value in the fields it should immediately check if the provided value is only English Alphabets and if it is other than English Alphabets, it should show FacesMessage immediately.

We can show the FacesMessage either as Critical Error, Error, Warning, or as Information.

Sample output is shown below:

Solution: For solution of the above requirement follow the steps as shown below:

Step 1: Create and Oracle ADF Fusion Application. Create a page with the name as demo.jspx.

Drag and drop four inputText component.

Inside the first inputText component drag and drop clientListener with type=”keyPress” and method=”validateFirstField”

Inside the second inputText component drag and drop clientListener with type=”keyPress” and method=”validateSecondField”

Inside the third inputText component drag and drop clientListener with type=”keyPress” and method=”validateThirdField”

Inside the fourth inputText component drag and drop clientListener with type=”keyPress” and method=”validateFourthField”

Write the body for each of the JavaScript functions.

Thus, the complete demo.jspx page is as below:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="demo" id="d1">
            <af:resource type="javascript">
              function validateFirstField(event) {
                  var validInput = /^[A-Za-z]+$/;
                  var getValue = event.getSource().getSubmittedValue();
                  AdfPage.PAGE.clearAllMessages();
                  if (getValue != '') {
                      if (!getValue.match(validInput)) {
                          AdfPage.PAGE.addMessage('it1', new AdfFacesMessage(AdfFacesMessage.TYPE_FATAL, "Invalid Value", "Only Alphabets Allowed"));
                          AdfPage.PAGE.showMessages('it1');
                          event.cancel();
                      }
                  }
              }

              function validateSecondField(event) {
                  var validInput = /^[A-Za-z]+$/;
                  var getValue = event.getSource().getSubmittedValue();
                  AdfPage.PAGE.clearAllMessages();
                  if (getValue != '') {
                      if (!getValue.match(validInput)) {
                          AdfPage.PAGE.addMessage('it2', new AdfFacesMessage(AdfFacesMessage.TYPE_ERROR, "Invalid Value", "Only Alphabets Allowed"));
                          AdfPage.PAGE.showMessages('it2');
                          event.cancel();
                      }
                  }
              }

              function validateThirdField(event) {
                  var validInput = /^[A-Za-z]+$/;
                  var getValue = event.getSource().getSubmittedValue();
                  AdfPage.PAGE.clearAllMessages();
                  if (getValue != '') {
                      if (!getValue.match(validInput)) {
                          AdfPage.PAGE.addMessage('it3', new AdfFacesMessage(AdfFacesMessage.TYPE_INFO, "Invalid Value", "Only Alphabets Allowed"));
                          AdfPage.PAGE.showMessages('it3');
                          event.cancel();
                      }
                  }
              }

              function validateFourthField(event) {
                  var validInput = /^[A-Za-z]+$/;
                  var getValue = event.getSource().getSubmittedValue();
                  AdfPage.PAGE.clearAllMessages();
                  if (getValue != '') {
                      if (!getValue.match(validInput)) {
                          AdfPage.PAGE.addMessage('it4', new AdfFacesMessage(AdfFacesMessage.TYPE_WARNING, "Invalid Value", "Only Alphabets Allowed"));
                          AdfPage.PAGE.showMessages('it4');
                          event.cancel();
                      }
                  }
              }
            </af:resource>
            <af:form id="f1">
                <af:panelFormLayout id="pfl1">
                    <af:inputText label="First Field : Show Message as Fatal" id="it1">
                        <af:clientListener type="keyPress" method="validateFirstField"/>
                    </af:inputText>
                    <af:inputText label="Second Field : Show Message as Error" id="it2">
                        <af:clientListener type="keyPress" method="validateSecondField"/>
                    </af:inputText>
                    <af:inputText label="Third Field : Show Message as Info" id="it3">
                        <af:clientListener type="keyPress" method="validateThirdField"/>
                    </af:inputText>
                    <af:inputText label="Fourth Field : Show Message as Warning" id="it4">
                        <af:clientListener type="keyPress" method="validateFourthField"/>
                    </af:inputText>
                </af:panelFormLayout>
            </af:form>
        </af:document>
    </f:view>
</jsp:root>

Note: To make sure that the user enters only English Alphabets we have used a regular expression (/^[A-Za-z]+$/). If we look at the JavaScript function that is added to the page, we can see it1 is the id of inputText for which we want to invoke the FacesMessage.

I am using demo.jspx page so I use the actual id of the component, if we try this in a Region, or Dynamic Region, or inside pageTemplate then we have to check and change the component id accordingly.

For example, in such cases, it will be something like r1:0:it1 or pt1:0:it1because that is a nested page structure.

We can get the id using componentBinding.getClientId();

Step 2: Save all and run the application. Thus, the ran application will be displayed as shown below:

Now, provide some alphanumeric value in each of these components, and we can see the FacesMessages as shown below.

Hence, the solution to our requirement.

If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.

Thanks & Regards,
Susanto Paul

 233 total views,  3 views today

By Susanto Paul

Susanto is an Oracle ACE, a qualified MCA, MBA, and a highly-skilled Senior Oracle Specialist. He is an enthusiastic Blogger and YouTuber who helps learners to solve their complex problems more efficiently. He has 9+ years of experience in multiple technologies like AWS, Oracle ADF, Oracle APEX, Oracle JET, Oracle VBCS, Oracle IDCS, Oracle PL/SQL, Oracle Integration Cloud, Java, JDBC, Servlets, JSP, Spring, Hibernate, HTML5, CSS3, JavaScript, TypeScript, NodesJS, Angular, MySQL, Oracle WebLogic Server, JUnit, JMeter, Selenium Web Driver, etc. He is a certified: Oracle Certified Professional Java SE 6 Programmer, Oracle ADF 11g Certified Implementation Specialist, Oracle Cloud Platform Application Integration 2020 Certified Specialist, Oracle Cloud Infrastructure Foundations 2020 Certified Associate, and Oracle Cloud Infrastructure Developer 2020 Certified Associate

Leave a Reply

Your email address will not be published. Required fields are marked *