Class: InvalidComponentTracker

Oracle® JavaScript Extension Toolkit (JET)
3.2.0

E87541-01

QuickNav

Fields

oj. InvalidComponentTracker

Version:
  • 3.2.0
Since:
  • 0.7

Constructor

new InvalidComponentTracker()

Tracks the validity of a group of components bound to this observable. It also provides properties and methods that the page author can use to enforce form validation best practice.

Validity of components that are disabled or readOnly will not be tracked by this object.

The invalidComponentTracker binding attribute should be bound to a ko observable, and 'ojs/ojknockout-validation' should be included in the dependency list. At runtime the framework creates an instance of this type oj.InvalidComponentTracker and sets it on the bound observable.
This object can then be used by page authors to do the following -

  • determine if there are invalid components tracked by this object that are currently showing errors.
  • determine if there are invalid components tracked by this object that are currently deferring showing errors.
  • set focus on the first invalid component in the tracked group
  • show all messages on all tracked components including deferred error messages, and set focus on the first invalid component.

Source:
Example

Bind an observable to the invalidComponentTracker and access oj.InvalidComponentTracker instance.

<input id="username" type="text" required 
  data-bind="ojComponent: {component: 'ojInputText', value: userName, 
   invalidComponentTracker: tracker}">
<input id="password" type="text" required 
  data-bind="ojComponent: {component: 'ojInputPassword', value: password, 
   invalidComponentTracker: tracker}">

<script>
function MyViewModel() { 
  var self = this;
  self.tracker = ko.observable();
  
  log = function ()
  {
    var trackerObj = ko.utils.unwrapObservable(self.tracker);
    console.log(trackerObj instanceof oj.InvalidComponentTracker); // true, so safe to call InvalidComponentTracker methods and properties. 
  }
  
  self.focusOnFirstInvalid = function() 
  {
     var trackerObj = ko.utils.unwrapObservable(self.tracker);
     if (trackerObj !== undefined)
     {
       // make sure the trackerObj is an oj.InvalidComponentTracker 
       // before calling methods on it.
       if (trackerObj instanceof oj.InvalidComponentTracker)
       {
          // showMessages first
          // (this will show any hidden messages, if any)
          trackerObj.showMessages();
          // focusOnFirstInvalid will focus on the first component
          // that is invalid, if any.      
          trackerObj.focusOnFirstInvalid();
        }
      }
    }
}
</script>
Note: Make sure you have included the 'ojs/ojknockout-validation' dependency in your require list,
otherwise you will see an error about InvalidComponentTracker being undefined.

Fields

invalidHidden :boolean

Whether there is at least one component that is invalid with deferred messages, i.e., messages that are currently hidden. For example, when a component is required, deferred validation is run when the component is created. Any validation error raised is not shown to user right away, i.e., it is deferred.
Default Value:
  • false
Source:
Example

Enable button using invalidHidden property:

<input id="username" type="text" required 
  data-bind="ojComponent: {component: 'ojInputText', value: userName, 
   invalidComponentTracker: tracker}">
<input id="password" type="text" required 
  data-bind="ojComponent: {component: 'ojInputPassword', value: password, 
   invalidComponentTracker: tracker}">
<br/>
<button type="button" data-bind="ojComponent: {component: 'ojButton', label: 'Create',
  disabled: !tracker()['invalidHidden']}">

<script>
var userName = ko.observable();
var password = ko.observable();
var tracker = ko.observable();
</script>

invalidShown :boolean

Whether there is at least one component (tracked by this object) that is invalid and is currently showing messages.
Default Value:
  • false
Source:
Example

Disable button using invalidShown property:

<input id="username" type="text" required 
  data-bind="ojComponent: {component: 'ojInputText', value: userName, 
   invalidComponentTracker: tracker}">
<input id="password" type="text" required 
  data-bind="ojComponent: {component: 'ojInputPassword', value: password, 
   invalidComponentTracker: tracker}">
<button type="button" data-bind="ojComponent: {component: 'ojButton', label: 'Create',
  disabled: tracker()['invalidShown']}">
  
<script>
var userName = ko.observable();
var password = ko.observable();
var tracker = ko.observable();
</script>

Methods

focusOnFirstInvalid() → {boolean}

Sets focus on first invalid component currently showing an error. This method does not set focus on components that are invalid and have deferred messages. For example, when a component is required, deferred validation is run. Any validation error raised is not shown to user right away, i.e., it is deferred.

To show hidden messages on all tracked components use showMessages() method.

Source:
See:
Returns:
true if there is at least one invalid component to set focus on; false if unable to locate a component to focus on or there are no invalid components.
Type
boolean

showMessages()

Shows hidden messages on all tracked components by calling showMessages() method on each tracked editable component.
Source:
See:
Example

Show all hidden messages on tracked components:

 function ViewModel ()
 {
   self = this;
   var tracker = ko.observable();
  // ...
  
  showAllMessages : function ()
  {
     var trackerObj = ko.utils.unwrapObservable(self.tracker);
        return trackerObj.showMessages();
   }
 }

Non-public Methods

<protected> Init()

Initializer
Source: