Results 1 to 4 of 4

Thread: HtmlEditor Validation if field have blank value

  1. #1

    Default HtmlEditor Validation if field have blank value

    Hi,

    I want to validate htmleditor field if its value is blank.
    I have tried vtype and allowBlank but htmleditor does not support that.

    Steps
    1) Add htmleditor field and submit button in form panel
    2) If value is blank then disable submit button.
    3) if enter value in htmleditor field then enable submit button.
    4) if i remove text from htmleditor field till blank value then again disable submit button again.

    Regards
    Yogesh

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Here's a link to a thread in which someone offers an override:
    http://www.sencha.com/forum/showthread.php?214146

  3. #3

    Default

    To access give n URL, required administrator access. Can you please help me to access given URL or alternate way.

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Apologies, looks like I've passed you a link to the Premium forum. Here is the override that user jmaia created in that thread:
    Code:
    // An Html Editor field that supports the allowBlank property
    
    
    
    
    Ext.define('MyApp.ux.field.HtmlEditorWithBlank', {
        extend: 'Ext.form.field.HtmlEditor',
        alias: 'widget.myappHtmlEditor',
    
    
    
    
        allowBlank: true,
    
    
    
    
        //<locale>
        blankText: 'This field is required',
        //</locale>
    
    
    
    
        /**
        * @private
        */
        constructor: function () {
            var me = this;
    
    
    
    
            me.callParent(arguments);
            return me;
        },
    
    
    
    
        /**
        * @private
        */
        initComponent: function (arguments) {
            var me = this,
                ext = Ext;
    
    
    
    
            ext.apply(me, me.initialConfig);        
    
    
    
    
            me.callParent(arguments);        
        },
    
    
    
    
        /**
        * Register events for management controls of labelled items
        */
        initEvents: function () {
            var me = this,
                ext = Ext;
    
    
    
    
            me.callParent(arguments);        
        },
    
    
    
    
        isValid: function () {
            var me = this,
                disabled = me.disabled,
                validate = me.forceValidation || !disabled;
    
    
    
    
            return validate ? me.validateValue(me.processValue(me.getValue())) : disabled;
        },
    
    
    
    
        validateValue: function (value) {
            var me = this,
                errors = me.getErrors(value),
                isValid = Ext.isEmpty(errors);
    
    
    
    
            if ((value === null) || (value === undefined))
            { return true; }
    
    
    
    
            if (!me.preventMark) {
                if (isValid) {
                    me.clearInvalid();
                } else {
                    me.markInvalid(errors);
                }
            }
    
    
    
    
            return isValid;
        },
    
    
    
    
        processValue: function (value) {
            var ret = value;
    
    
    
    
            ret = value.replace('<br>', '');
            ret = ret.replace('<br/>', '');
            ret = ret.replace('<p>', '');
            ret = ret.replace('</p>', '');
            ret = ret.replace(' ', '');
    
    
    
    
            return ret;
        },
    
    
    
    
        getErrors: function (value) {
            var errors = [];
    
    
    
    
            if ((!this.allowBlank) && (!value || value === '')) {
                errors.push(this.blankText);
            }
    
    
    
    
            return errors;
        },
    
    
    
    
        markInvalid: function (errors) {
            var me = this,
                oldMsg = me.getActiveError();
            me.setActiveErrors(Ext.Array.from(errors));
            if (oldMsg !== me.getActiveError()) {
                me.updateLayout();
            }
        },
    
    
    
    
        renderActiveError: function () {
            var me = this,
                hasError = me.hasActiveError();
            if (me.inputEl) {
                // Add/remove invalid class
                me.bodyEl[hasError ? 'addCls' : 'removeCls'](me.invalidCls + '-field');
            }
            me.mixins.labelable.renderActiveError.call(me);
        },
    
    
    
    
        clearInvalid: function () {
            var me = this,
                hadError = me.hasActiveError();
            me.unsetActiveError();
            if (hadError) {
                me.updateLayout();
            }
        }
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •