Fork me on GitHub
APEX Live Validation
Installation
  1. Download the jQuery Live Validation plugin files
  2. Include jquery.alv.js and style.alv.css in your application
  3. Make sure your application has the jQuery library included (minimum version is 1.4.2)
  4. Optionally style erroneous elements with CSS
    • Erroneous input items have the alv-item-error class assigned
    • The associated label has the alv-label-error class assigned *
    • Error messages have the alv-error-msg class assigned

* Only if the label element in your label template contains the following attribute for="#CURRENT_ITEM_NAME#"


Usage

Invoke the ALV jQuery plugin on page load. Some examples:

      // invocation with no options
      $('#P100_LAST_NAME').alv();
      
      // is the same as
      $('#P100_LAST_NAME').alv({
        validate: 'notEmpty',
        triggeringEvent: 'blur',
        errorMsgLocation: 'after',
        allowWhitespace: true
      });
    
      // valid e-mail validation
      $('#P100_EMAIL').alv({
        validate: 'itemType',
        triggeringEvent: 'keyup',
        itemType: 'email'
      });
    
      // validate equality
      $('#P100_REPEAT_PASSWORD').alv({
        validate: 'equal',
        equal: '#P100_PASSWORD'
      });
    
      // validate date order
      $('#P100_DATE').alv({
        validate: 'dateOrder',
        dateFormat: '&APP_NLS_DATE_FORMAT.',
        min: '#P100_START_DATE',
        max: '#P100_END_DATE'
      });
    
      // validate form before submit
      $('#submitBtn').alv('validateForm', {
        formsToSubmit: '#empForm,#deptForm'
      });

As a best practice, it is advisable to separate client-side and server-side error messages. Client-side error messages are always shown inline, so it's a good idea to display server-side error messages in notification only.
The dateFormat option needs to be specified for date related validations. You'll most likely want to reference the default application date format to avoid duplication. This is possible starting from APEX 4.2 by using the &APP_NLS_DATE_FORMAT. substitution string. Older versions will have to rely on an application item which contains the application date format.

Available Options

Item Validation

      $('#P100_LAST_NAME,#P100_EMAIL').alv({
        validate: 'notEmpty',
        triggeringEvent: 'blur',
        condition: '',
        validationMinLength: 0,
        errorMsg: '',
        errorMsgLocation: 'after',
        allowWhitespace: true,
        itemType: '',
        dateFormat: '',
        min: '',
        max: '',
        equal: '',
        regex: '',
        itemSuccess: function() {
                       alert("item success");
                     },
        itemFail: function() {
                    alert("item failure");
                  }
      });

Form Validation

      $('#createBtn,#saveBtn').alv('validateForm', {
        formsToSubmit: '#form1,#form2',
        errorMsg: '',
        formSuccess: function() {
                       alert("form success");
                     },
        formFail: function() {
                    alert("form failure");
                  }
      });

Item Validation Options

# Option Description Values Example
1 validate The type of validation you want to perform. notEmpty
itemType
equal
regex
charLength
numberSize
dateOrder
totalChecked 		validate: 'itemType'
2 triggeringEvent The JavaScript event that will cause the validation to fire. blur
focusout
change
keyup 		triggeringEvent: 'keyup'
3 condition Optionally specify a JavaScript expression to support conditional execution of your validation. The validation will fire when the expression evaluates to true. condition: '$('#P5_COUNTRY').val() === "Belgium"'
4 validationMinLength The amount of characters required before the validation is fired. validationMinLength: 3
5 errorMsg Specifying an error message overrides the default error message. Use &1, &2, &n for substitution values. errorMsg: 'invalid date (expected date format: &1)'
6 errorMsgLocation Show the error message before or after the input item. after
before 		errorMsgLocation: 'before'
7 allowWhitespace Determine whether a string containing only whitespace characters is regarded as empty. true
false 		allowWhitespace: false
8 itemType Define what kind of item type validation should be applied. number
digit
alphanumeric
date
email
url 		itemType: 'email'
9 dateFormat Set the default application date format. Only applicable for date related validations. dateFormat: 'MM-DD-YYYY'
10 min The minimum boundary based on a fixed value or jQuery selector. min: 5
min: '#P100_START_DATE'
11 max The maximum boundary based on a fixed value or jQuery selector. max: 10
max: '#P100_END_DATE'
12 equal Select the page item that you want the value to be equal to. Frequently used to validate that two password fields are equal. equal: '#P100_PASSWORD'
13 regex Specify a regular expression to which the entered value will be matched. regex: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$'

Form Validation Options

# Option Description Values Example
1 formsToSubmit A comma separated jQuery selector which identifies the form region(s) that need to be validated before the page is submitted. formsToSubmit: '#empForm,#deptForm'
2 errorMsg Specifying an error message overrides the default error message. errorMsg: 'Errors exist on the page'


© by Nick Buytaert for Contribute NV