Question

I am doing form validations in Sencha Touch 2.3. My model looks like following.

$('#cssmenu a').on('click', function() {
  if ($(this).find('ul').is(':visible')) {
    // Close the menus
  }
});

Following is a code segment that I use in my controller to remove validations from hidden form fields but no luck.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='cssmenu'>
  <ul>
    <div id='menuspace'></div>
    <li><a href='/0/wall/' class='ajaxtrigger'><span>Home</span></a>
    </li>"
    <li class='active has-sub'><a href='#'><span>Media</span></a>"
      <ul>
        <li class=''>
          <a href='/0/youtube/' class='ajaxtrigger'> <span>Youtube</span>
          </a>
        </li>
        <li class=''><a href='/0/soundcloud/' class='ajaxtrigger'><span>Soundcloud</span></a>
        </li>
        <li class=''><a href='/0/mixcloud/' class='ajaxtrigger'><span>Mixcloud</span></a>
        </li>
        <li class=''><a href='/0/pictures/' class='ajaxtrigger'><span>Pictures</span></a>
        </li>
      </ul>
    </li>
    <li class='active has-sub'><a href='#'><span>About</span></a>"
      <ul>
        <li class=''><a href='/0/biography/' class='ajaxtrigger'><span>Biography</span></a>
        </li>
        <li class=''><a href='/0/discography/' class='ajaxtrigger'><span>Discography</span></a>
        </li>
        <li class=''><a href='/0/agenda/' class='ajaxtrigger'><span>Agenda</span>    </a>
        </li>
        <li class=''><a href='/0/releases/' class='ajaxtrigger'><span>Releases</span></a>
        </li>
      </ul>
    </li>
    <li class='last'><a href='/0/contact' class='ajaxtrigger'><span>Contact</span></a>
    </li>
  </ul>
</div>

I would be much appreciated if anyone could help me to solve this.

Thank you

Answer 1

所以有多种方法可以实现这一点，我的偏好即使有些人不喜欢它，但它总会有效。

我做了以下覆盖来解决这个问题，尽量不要影响正常的验证流程。前两个覆盖必须添加到你的覆盖文件夹的某个地方，你只需要为整个app添加一次

Ext.Define('Ext.form.field.BaseOverride', {
    override: 'Ext.form.field,Base',        
/* traverse up and look for a hidden Parent/Ancestor */
    isParentHidden: function () {
        return this.up('[hidden=true]');
    }       
/* override isValid basic method to consider skipValidateWhenHidden property, when skipValidateWhenHidden is set to true code should check if the elementor it's Parent/Ancestors is hidden */ 
    isValid: function () {      
        var me = this,
            disabled = me.disabled,
            isHidden = me.isHidden(),
            skipValidateWhenHidden = !!me.skipValidateWhenHidden,
            validate = me.forceValidation || !disabled,
            isValid = validate ? me.validateValue(me.processRawValue(me.getRawValue())) : disabled;

        if (isValid || !skipValidateWhenHidden) {
        return isValid;
        }

        if (skipValidateWhenHidden) {
            isHidden = isHidden ? true : me.isParentHidden();
            if (isHidden) {
                return skipValidateWhenHidden;
            }
        }

        return isValid;
    }
});

最终你将能够执行以下操作，在任何字段上将属性设置为true，因此如果用户看不到该属性，它将在验证后继续存在

 {
      itemId: 'City',
      cls: 'AddressCity',
      xtype: 'textfield',
      emptyText: emptyCityText,
      skipValidateWhenHidden: true,
 },

另一种方法是在字段容器上添加show（）/ Hide（）侦听器以启用/禁用子节点，禁用字段会使它们跳过验证，但我不是管理按钮状态的忠实粉丝布线听众。

Answer 2

注意

Ext.getCmp()需要组件ID

errorObj.getField().toString()返回模型字段名称，但不会返回组件（隐藏）字段的id。

因此，如果模型字段名称与隐藏字段ID匹配，则它将起作用。否则它将无法工作。

Sencha Touch 2.3: Remove validations from hidden form fields

2 个答案: