Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
hi everyone,
i need help regarding the error message bubble.
i want to set a, let's say, decimalbox' error message not to appear when user input an invalid value (e.g.:'...') and sets the value to an empty string when an invalid value is inputted.
is there any way to do this?
i have some ways to make it looks like the error message bubble is not appearing by calling clearErrorMessage() method, and put some logic in the onBlur event of the widget
<decimalbox id="test">
<attribute w:name="onBlur">
var errmsg=this.getErrorMesssage();
if(errmsg!=null){
this.setValue("");// or this.setValue(null);
this.clearErrorMessage(false,false);
}
</attribute>
</decimalbox>
but, the value is not cleared. i can set the value to 0,but i haven't found a way to set it to an empty string. can i set a decimalbox' value to an empty string and not 0 programmatically?
so as a workaround i tried using jq to do the trick.
<decimalbox id="test">
<attribute w:name="onBlur">
var obj=jq('$'+this.getId());
var value= obj.val();
var errmsg=this.getErrorMesssage();
if(errmsg!=null){
obj.val('');
this.clearErrorMessage(false,false);
}
</attribute>
</decimalbox>
the drawback is that i need to explicitly assign its id, and if i have the same component with the same id in several id spaces, all the value in those component will be set to "".
i have opened the decimalbox.js' source code for decimalbox and i have tried to override the coerceFromString_ method (from what i understand, this method is the one that throws the error message, perhaps i'm wrong)
i saw this documentation for overriding a widget method
http://docs.zkoss.org/wiki/Client_Side_Programming#Override_a_Default_Widget_Method
my code:
zul.Decimalbox.prototype.coerceFromString_ = function (value){
if (!value) return null;
var info = zk.fmt.Number.unformat(this._format, value),
val = new zk.BigDecimal(info.raw),
sval = val.$toString();
//if (info.raw != sval && info.raw != '-'+sval) //1e2 not supported (unlike Doublebox)
// return {error: zk.fmt.Text.format(msgzul.NUMBER_REQUIRED, value)};
if (info.divscale) val.setPrecision(val.getPrecision() + info.divscale);
return val;
}
when i tried to test my code my page just kept processing for hours without end until i finally closed my browser.
to be honest, this is my first time developing a web app, so i'm still new with javascript.
any help would be very appreciated,
thank you
regards,
Erlangga
Hi Erlangga
I created a sample
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
<decimalbox>
<attribute w:name="coerceFromString_"><![CDATA[
function (value) {
var val = this.$coerceFromString_(value);
if (val && val.error) {
this.setValue('');
return '';
}
return value;
}
]]></attribute>
</decimalbox>
</zk>
is it you want?
Hi as1225,
yes, that is what i want.
thank you very much, you're a lifesaver. ^^
oh.. i just found out something funny when i tested your code.
i try to input '..' and leave the focus, it get cleared. but when i input '..' again. it doesn't get cleared.
any idea why?
Yes
It cause by setValue is too early
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
<decimalbox>
<attribute w:name="coerceFromString_"><![CDATA[
function (value) {
var val = this.$coerceFromString_(value);
this._hasError = false;
if (val && val.error) {
this._hasError = true;
return '';
}
return value;
}
]]></attribute>
<attribute w:name="_validate"><![CDATA[
function (value) {
var val = this.$_validate(value);
if (this._hasError)
this.setValue("");
return val;
}
]]></attribute>
</decimalbox>
</zk>
BTW
You can refer to js doc
if you want the decimalboxes have the same behavior
<zk>
<script type="text/javascript"><![CDATA[
zk.afterLoad('zul.inp', function () {
var _xDecimalbox = {}
zk.override(zul.inp.Decimalbox.prototype, _xDecimalbox, {
coerceFromString_: function (value) {
var val = _xDecimalbox.coerceFromString_.apply(this, arguments); //call the original method
this._hasError = false;
if (val && val.error) {
this._hasError = true;
return '';
}
return value;
},
_validate: function (value) {
var val = _xDecimalbox._validate.apply(this, arguments); //call the original method
if (this._hasError)
this.setValue("");
return val;
}
});
});
]]></script>
<decimalbox/>
<decimalbox/>
</zk>
<device-config>
<device-type>ajax</device-type>
<embed><![CDATA[
<script type="text/javascript">
zk.afterLoad('zul.inp', function () {
var _xDecimalbox = {}
zk.override(zul.inp.Decimalbox.prototype, _xDecimalbox, {
coerceFromString_: function (value) {
var val = _xDecimalbox.coerceFromString_.apply(this, arguments); //call the original method
this._hasError = false;
if (val && val.error) {
this._hasError = true;
return '';
}
return value;
},
_validate: function (value) {
var val = _xDecimalbox._validate.apply(this, arguments); //call the original method
if (this._hasError)
this.setValue("");
return val;
}
});
});
</script>
]]></embed>
</device-config>
Asked: 2010-08-31 04:12:55 +0800
Seen: 656 times
Last updated: Sep 12 '10