web-dev-qa-db-ja.com

ExtJs依存フィールド検証

別のフィールドに依存している1つのフィールドを検証するにはどうすればよいですか？

{
  xtype:          'textfield',
  name:           'name2',
  vtype:          'type',      // how to write the validation code for this if it 
                               // depends on the value of another field?
  allowBlank:     false
}
javascriptvalidationextjs
11
fastcodejava

独自のカスタムバリデーターを追加し、そこに検証を実行します。

var field_one = new Ext.form.TextField({
    name: 'field_one',
    fieldLabel: 'Field one'
});

var field_two = new Ext.form.TextField({
    name: 'field_two',
    fieldLabel: 'Field two',
    validator: function(value){
        if(field_one.getValue() != value) {
            return 'Error! Value not identical to field one';
        } else {
            return true;
        }
    }
});
25
ChrisR

フィールド定義：

....
monitorValid:     true,
....
}, {
  xtype:          'textfield',
  name:           'name1',
  ref:            'name1',

}, {
  xtype:          'textfield',
  name:           'name2',
  ref:            'name2',
  allowBlank:     false,
....

次のinitComponent（または好みの場合はリスナー）：

this.name2.on ( 'change', this._validate_name2, this );

formPanelでハンドラーを定義します。

this._validate_name2: function ( ) {
   if ( this.name1.getValue () == this.name2.getValue () ) {
      this.name2.markInvalid ( 'field does not match name1' );
      this.name2.setValue ( null );
   }
}

「markInvalid（）メソッドは、値が検証に合格した場合にフィールドのvalidateメソッドがfalseを返すことはありません。したがって、フィールドを無効としてマークするだけでは、Ext.form.Action.Submit.clientValidationオプションセットで送信されたフォームの送信が妨げられません。 「」

このため、allowBlankとsetValue（null）の組み合わせは検証に失敗します

2
bensiu

Ext JS5.1のコンボボックスでこれを行う方法の例をモックアップしました... Ext4コードに簡単に移植できます。ViewControllerのinitComponentの代わりにinitを使用する必要があります。コードは次のとおりです（および Fiddle ）：

Ext.application({
  name: 'Fiddle',

  launch: function() {
    Ext.define('MyComboViewController', {
      extend: 'Ext.app.ViewController',
      alias: 'controller.mycombo',
      init: function() {
        this.getView().setStore(this.createStore());
      },
      createStore: function() {
        var store = Ext.create('Ext.data.Store', {
          fields: [
            {name: 'disp', type: 'string'},
            {name: 'val', type: 'int'}
          ],
          data: [
            {disp: 'One', val: 1},
            {disp: 'Two', val: 2},
            {disp: 'Three', val: 3},
            {disp: 'Four', val: 4},
            {disp: 'Five', val: 5}
          ],
          proxy: {
            type: 'memory'
          }
        });
        return store;
      }
    });

    Ext.define('MyCombo', {
      extend: 'Ext.form.field.ComboBox',
      xtype: 'myCombo',
      controller: 'mycombo',
      displayField: 'disp',
      valueField: 'val',
      labelAlign: 'top',
      validateOnChange: false,
      typeAhead: true,
      queryMode: 'local'
    });

    Ext.define('MyCombosContainerViewController', {
      extend: 'Ext.app.ViewController',
      alias: 'controller.mycomboscontainer',
      init: function() {
        var startCombo = this.lookupReference('startCombo');
        var endCombo = this.lookupReference('endCombo');
        startCombo.validator = Ext.bind(this.comboValidator, this, [startCombo, endCombo]);
        endCombo.validator = Ext.bind(this.comboValidator, this, [startCombo, endCombo]);
      },
      comboValidator: function(startCombo, endCombo) {
        return startCombo.getValue() < endCombo.getValue();
      },
      onSelectComboBox: function(combo) {
        var startCombo = this.lookupReference('startCombo');
        var endCombo = this.lookupReference('endCombo');
        startCombo.validate();
        endCombo.validate();
      }
    });

    Ext.define('MyCombosContainer', {
      extend: 'Ext.form.FieldContainer',
      controller: 'mycomboscontainer',
      layout: {
        type: 'hbox',
        align: 'stretch'
      },
      items: [{
        xtype: 'myCombo',
        reference: 'startCombo',
        fieldLabel: 'Start',
        listeners: {
          select: 'onSelectComboBox'
        }
      }, {
        xtype: 'myCombo',
        reference: 'endCombo',
        fieldLabel: 'End',
        listeners: {
          select: 'onSelectComboBox'
        }
      }]
    });

    Ext.create('MyCombosContainer', {
      renderTo: Ext.getBody()
    });
  }
});
2
incutonez

リンクされたフィールドを検証するために、私は通常、事前構成されたスコープと検証ロジックを備えた無名関数を返す関数を作成します（これをExt.lib.Validatorsクラスに追加して、アプリケーション全体で呼び出すことができます）（これを複数回使用できます）応用）。

次に例を示します。

myValidator: function (firstFieldSelector, secondFieldSelector, thirdFieldSelector) {
    return function () {
        var firstField = Ext.ComponentQuery.query(firstFieldSelector)[0],
            secondField= Ext.ComponentQuery.query(secondFieldSelector)[0],
            thirdField= Ext.ComponentQuery.query(thirdFieldSelector)[0];

        if (firstField && secondField && thirdField) {
            // Validation logic here...
            if( true ) {
                return true;
            } else {
                return 'Error text here...';
            }
        } else {
            // Validator incorrectly configured, do not validate with it
            return true;
        }
    }
}

そしてここに フィドルの例 タイムスパンを選択します。

0
Sergey Novikov

一般的に-相互検証が必要なすべてのフィールドに変更イベントリスナーを接続することをお勧めします。変更イベントハンドラーでは、変更されるフィールドで検証する必要がある他のすべてのフィールドで検証をトリガーする必要があります。このアプローチは、フォームがあり、多くのフィールドがあり、多くの検証を行う必要がある場合に非常にうまく機能します。

0
Vineet