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="" version="2.1" xmlns:f=""
          xmlns:af="">
    <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:it1, because 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

 444 total views,  1 views today