Validator for ExtJS Checkbox

Very unfortunately ExtJS doesn’t offer a validator for its checkbox component.
Normally a validator checks whether a field is valid and takes care of displaying an error message if not. For a checkbox we would like that to happen if the checkbox is not selected.
Overriding the validate function of the checkbox we can provide such a functionality for all checkbox instances we are about to create:

The validator can be customized using the properties validateField and validateMessage.

Here’s a small code example:

  • Steve Martin

    Marcus – thank you for the checkbox validation. I use a checkbox to verify that the user read the “terms of engagement” … making the checkbox required before the form is submitted.

    Awesome on your part!!

  • thosimo

    Thank you, but if I submit the form, I have always an error message until I change the code like this:

  • thx a lot
    helpful post

  • How i call click event on radio button click?.. And how i can do in extjs like show and hide div in normal html and javascript?

  • ranjan

    May i know, is this code compatible with the ExtJS 4.0.2.

    if not, can anybody assist me out with the code for extjs 4.0.2

  • Andy Mitchell

    In regards to ExtJS 4, the checkbox field has a “getErrors: function(value)” method that’s called during submission. If your checkbox is valid, return an empty array ([]). Otherwise, return an array of strings to indicate the checkbox is invalid (example: [‘Please select the checkbox to indicate…’]).

  • Thanks for the tip.

    I have removes the code:
    this.msgTarget = ‘under’;
    Without it, you receive the red rounded alert icon, near the checkbox.

    In order to position it correctly I have used some CSS like this:
    #[checkbox id] .x-form-invalid-icon
    {
    left:[value]px !important;
    top:[value]px !important;
    }

  • Fred

    Hi there,
    Has anyone done this override with ExtJS 4.x.
    I do use version 4.1.1 and it seems that the errorEl is not part of the Checkbox class.
    So I get the following error:
    Uncaught TypeError: Cannot call method ‘addCls’ of null ext-all-debug.js:71081


    prepare: function(ownerContext, owner) {
    var errorEl = owner.errorEl,
    cls = Ext.baseCSSPrefix + 'form-invalid-under';

    errorEl.addCls(cls);
    Uncaught TypeError: Cannot call method 'addCls' of null
    errorEl.setDisplayed(owner.hasActiveError());
    },

  • getForm.isValid() would always return false when you have other checkboxes without validateField set to true.

    This is better:

    Ext.form.field.Checkbox.prototype.validate = function(){
    if (this.validateField) {
    this.msgTarget = ‘under’;
    if (this.checked) {
    Ext.form.Field.prototype.clearInvalid.call(this);
    return true;
    }
    Ext.form.Field.prototype.markInvalid.call(this, this.validateMessage);
    return false;
    }
    return true;
    };

  • jaydip

    where to put code in javascript file that you discuss in above.