PDA

View Full Version : HtmlEditor Validation if field have blank value



yogesh.dabhi91
24 Mar 2014, 5:22 AM
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

Gary Schlosberg
24 Mar 2014, 11:33 AM
Here's a link to a thread in which someone offers an override:
http://www.sencha.com/forum/showthread.php?214146

yogesh.dabhi91
27 Mar 2014, 2:48 AM
To access give n URL, required administrator access. Can you please help me to access given URL or alternate way.

Gary Schlosberg
27 Mar 2014, 6:43 AM
Apologies, looks like I've passed you a link to the Premium forum. Here is the override that user jmaia created in that thread:


// 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();
}
}
});