Applying Form Validation Best Practices

The Oracle JET framework provides methods on the oj.InvalidComponentTracker object that you can use to implement Oracle's recommended best practices for form validation.

The Oracle JET Cookbook includes a complete example that illustrates how you can implement the oj.InvalidComponentTracker object for form validation. For details, see Form Validation (Complete Example).

To apply best practices to form validation:

If there are invalid components showing on the page, disable any button that might submit input to the server.
To configure this behavior, bind the button component's disabled option to the invalidShown property of the oj.InvalidComponentTracker object.
```
self.shouldDisableCreate = function()
{
  var trackerObj = ko.utils.unwrapObservable(self.tracker), 
  hasInvalidComponents = trackerObj ? trackerObj["invalidShown"] : false;
  return  hasInvalidComponents;
};
```
If there are invalid components currently showing messages, the method returns true, and the button is disabled. If there are deferred errors or no visible errors, this method returns false, and the button is enabled.

For example in the Cookbook demo, the Create button's disabled option is bound to a method that uses the invalidShown property as described above. If the user tabs off a field with invalid data, the component displays an error, and the Create button is disabled.

After the user corrects the error by entering a valid value, such as abc, the error is cleared on the field, and the Create button enabled again.
When the user clicks Create , the application should display deferred messages on all tracked components.
To display the deferred messages, use the oj.InvalidComponentTracker object's showMessages() method.
```
trackerObj.showMessages();
```
If deferred messages are shown, the Create button will be disabled automatically.

After the user corrects all errors, the Create button will be automatically enabled again.
When the user clicks Create again, since there are no more deferred messages, the application can now perform business validation on the data.

In this example, business validation refers to cross-field validation, such as verifying that the email exists when the user selects email as the preferred contact.

Any errors generated are set on the component's messagesCustom option and are automatically shown to the user. The Create button will be disabled again until the user corrects all errors.
When the user clicks Create again, the application can now perform more business validation or submit the form data to the server.

The server could return with validation errors or changed values on one or more components. If there are validation errors, you can update the component's messagesCustom option. If there are updated values, update the component's value option.

For additional detail about the oj.InvalidComponentTracker object and the invalidComponentTracker binding attribute, see Using a Component's invalidComponentTracker Binding Attribute.