Hello all
This post is about use of JavaScript in ADF Faces to show a simple message notification , it may be error/warning/information/critical error message
so this is simple, as we have to just invoke default FacesMessage using JavaScript
So for this i have used an af:inputText on page and use case is that this field should only take characters
How to validate characters (alphabet) only using javascript ?
So for this i have taken a simple regular expression that check that entered value is alphabetic or not
see this JavaScript function that is added to page, here
it1 is the id of inputText for that FacesMessage is invoked, i am using Jspx page so i use actual id of component, if you try this in region,dynamic region or inside pageTemplate then check and change the id of component .
It will be something like
r1:0:it1 or
pt1:0:it1, because that is nested page structure.
you can get this id using
componentBinding.getClientId();
<af:resource type="javascript">
function validateStringOnKeyPress(event) {
//Regular Expression to validate String
var letters = /^[A-Za-z]+$/;
//Get value of input text
var charCode = event.getSource().getSubmittedValue();
if (charCode != '') {
if (charCode.match(letters)) {
// IF matches then no problem
}
else {
//Invoke FacesMessage
AdfPage.PAGE.addMessage('it1', new AdfFacesMessage(AdfFacesMessage.TYPE_ERROR, "Invalid Value", "Enter Characters Only"));
AdfPage.PAGE.showMessages('it1');
event.cancel();
}
}
}
</af:resource>
Added a clientListener to inputText that executes this JavaScript function on keyPress event
Run page and see how it works-
Here you see that 2 is not a character so it showing error message as FacesMessage is defined for
TYPE_ERROR
So it's done but now problem is - when user input a wrong value a error message is displayed and after this validation alert if user keeps entering wrong values then every time a new FacesMessage is created and added to page, It appears on page like this (duplicate messages - really weird)
To remove additional messages , i have added one more line in JavaScript to clear previous validation message
JavaScript to clear validation message-
// Clear all validation message
AdfPage.PAGE.clearAllMessages();
now JavaScript function is like this
function validateStringOnKeyPress(event) {
//Regular Expression to validate String
var letters = /^[A-Za-z]+$/;
//Get value of input text
var charCode = event.getSource().getSubmittedValue();
// Clear all validation message
AdfPage.PAGE.clearAllMessages();
if (charCode != '') {
if (charCode.match(letters)) {
// IF matches then no problme
}
else {
//Invoke FacesMessage
AdfPage.PAGE.addMessage('it1', new AdfFacesMessage(AdfFacesMessage.TYPE_ERROR, "Invalid Value", "Enter Characters Only"));
AdfPage.PAGE.showMessages('it1');
event.cancel();
}
}
}
and yes you can change type of message, use
TYPE_ERROR, TYPE_INFO, TYPE_WARNING, TYPE_FATAL to change message type
see different output-
Warning Message (
TYPE_WARNING)-
Informational Message (
TYPE_INFO)-
Fatal Error Message (
TYPE_FATAL)-
Thanks Happy Learning :)