Tuesday, 4 November 2008

Hack on FormCheck : Disabled Input Element

最近结合MooTools 1.2使用FormCheck,进行Form数据的验证。显示效果,自然是很漂亮。不过,还是有地方不够完善,需要自己动动手。

其中一点,如果一个INPUT设置了required,但它被disabled之后,仍然会进行validation。增加313行,对disabled的元素,禁止(直接忽略)validation。一但该元素恢复enabled之后,validation也会自动恢复。

309:   ...
310:   validate : function(el) {
311:       el.errors = [];
312:       el.isOk = true;
313:       if( el.get('disabled') )    return true;    // skip the validation on the disabled element
314:       if (this.options.trimValue) el.value = el.value.trim();
315:   ...

* 以上改动,基于FormCheck v.1.4RC6。

在具体使用上,会遇到一个小问题。在INPUT是enabled的时候,validation没有通过,有出错提示出现,并会停留在页面上。这时,disable该INPUT元素,忽略validation,出错提示应该消失。这可以通过触发一个onBlur事件来实现。

  1:   var elStatus = ...;
  2:   var targetEl = $$('input[name=abc]');
  3: 
  4:   targetEl.set('disabled', elStatus);
  5: 
  6:   if(elStatus == '0') {
  7:       targetEl.fireEvent('blur');
  8:   }

这里,对name=abc的INPUT元素,进行enable/disable处理。一旦disable,就会关闭出错提示;而enable的时候,并不马上进行validation。这样比较符合正常的是用习惯。

0 Comments:

Post a Comment

<< Home