Form Validator

This component supports the visualization of validation errors in forms. It uses a button to show whether all form fields are free of validation errors. If one or more fields have validation fields, this is indicated in color. The number of errors is also displayed. If you move the mouse over the button, further information is displayed. If you click on the button, all fields with errors are briefly highlighted.

Usage

This component can be used in any Ext.panel.Panel as an ExtJS plugin. These must at least implement the interface Ext.form.field.Field.

Plugin definition incl. all possible configuration parameters

Ext.define("",{
// ...
plugins: {
    bpcFieldValidator: {
        /**
         * ComponentQuery string to find the validationButton
         */
        validationButtonSelector : "#formChecker",

        /**
         * Components witch match this query will be enabled/disabled regarding the validation state
         */
        enableComponentsSelector : "[enableOnValidForm=true]",

        /**
         * If true the plugin try to inject a button in a toolbar
         */
        autoInjectValidationButton : false,

        /**
         * Trigger invalidation mark on hightlight.
         */
        markInvalidOnHighlight : false
    }
}
// ...
});

Beispiel mit zwei Panels

var items = [
   {
         xtype: "panel",
         title:"Injected in Toolbar",
         tbar: [], // we need at least one toolbar, bbar, buttons or any other toolbar within this panel are fine
         plugins: {
            bpcFieldValidator: {
               autoInjectValidationButton: true
            }
         }
      },

      {
         xtype: "panel",
         title:"Custom btn via default itemId",
         tbar: [
            {
               xtype: "button",
               iconCls: "x-fal fa-fire",
               text: "this text will be overridden by the plugin",
               itemId: "formChecker" // this is the default itemId
            }
         ],
         plugins: {
            bpcFieldValidator: {
               markInvalidOnHighlight: true, // triggers also the field validation error msg
               validationButtonSelector: "#formChecker" // this is the default value in bpcFieldValidator
            }
         }
      }
];

Source code

Demo

Keywords: