It’s been several months now since I released the APEX Live Validation (ALV) plugin in which I introduced client-side validation abilities for Application Express. The core of the plugin is a powerful jQuery plugin which does all the heavy lifting to get the validations in place. The minimum required version for the APEX plugin is 4.1. Older versions, however, can use the jQuery plugin as a standalone. This means that you can’t rely on a declarative approach to setup your validations, but the good part is that you don’t lose any of the plugin’s features. This article provides a detailed overview on how to start using the APEX Live Validation jQuery plugin.


  • First things first, download the ALV jQuery plugin here and unzip the file.
  • You should now see two files: jquery.alv.js and style.alv.css. We’ll need them both.
  • Upload both files to your web server or include them as files in shared components (application or workspace images).
  • Include jquery.alv.js and style.alv.css on your pages, either via page template or page definition. An example:
<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery.alv.js"></script>
<link rel="stylesheet" type="text/css" href="#WORKSPACE_IMAGES#style.alv.css">


The ALV jQuery plugin requires at least version 1.4.2 of jQuery. Make sure you include the jQuery library before including jquery.alv.js.

<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery-1.10.2.min.js"></script>

Item validation

You are all set now to start validating forms client-side using the ALV plugin. Find yourself a form you want to validate and get ready to write your very first validation. The most basic example looks like this:

$(function() {

You don’t need the $(function() { … }); method whenever you put the code in the Execute when Page Loads section on page definition. This method causes the code to run after the DOM is loaded. That’s how the plugin is designed to work; validations are bound to page items after the page is fully loaded.

The code itself is fairly easy to understand. We simply apply the alv function to the P10_NAME page item. As you might have noticed, the function invocation doesn’t specify what sort of validation should be performed. In this case, the plugin will revert to its default settings. So the following code example has the exact same result as the previous one.

$(function() {
    validate: "notEmpty",
    triggeringEvent: "blur",
    errorMsgLocation: "after",
    allowWhitespace: true

As you can see, omitting the validate setting results in a notEmpty validation. The other default values:

  • the triggering event defaults to the blur event.
  • the location of the error message is shown after the input item.
  • input values containing only whitespace characters are regarded as not empty.

All of the different settings and possible setting values are documented here. Let’s go through several other common validation situations.

$(function() {
  // valid e-mail
    validate: "itemType",
    triggeringEvent: "keyup",
    itemType: "email"

  // number between 0 and 100
    validate: "numberSize",
    errorMsgLocation: "before",
    min: 0,
    max: 100

  // end date higher than start date
    validate: "dateOrder",
    dateFormat: "&APP_NLS_DATE_FORMAT.",
    min: "#P10_START_DATE"

  // match a hex value (e.g. #FFFFFF)
    validate: "regex",
    regex: "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"

Form validation

You’ll probably want to prevent the end user from submitting the page whenever the form contains erroneous input. To do so, we need to make a connection between the button or buttons that cause one or more regions to get processed. You first have to make all these components identifiable. This means that you have to assign each button or region a static ID.

Now imagine you have a region with an ID of empForm and a button with ID saveEmp. The saveEmp button causes a process to run that saves the data from the page items within the empForm region. We want to validate that region on button click so that we can prevent a page submit in case the empForm region contains any errors. Here’s the code:

$("#saveEmp").alv("validateForm", {
  formsToSubmit: "#empForm",
  errorMsg: ""

Multiple region or button ID’s are separated with a comma, like in the following example:

$("#createBtn,#saveBtn").alv("validateForm", {
 formsToSubmit: "#form1,#form2",
 errorMsg: ""

That’s it. I hope you understand now what it takes to register live validations on page items using the ALV jQuery plugin. Make sure you read and understand the documentation page before you start using the plugin. It will save you time and frustrations in the long run.