Comment valider un champ qui dépend d'un autre champ?
5 Réponses :
En ajoutant votre propre validateur personnalisé et effectuez votre validation.
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;
}
}
});
bonne réponse, mais comment effectuer la validation dans un autre endroit, par exemple à l'intérieur de l'auditeur d'action d'un autre bouton.
C'est également possible, mais vous devrez obtenir des références à vos éléments via la portée ou ext.gecmp () si vous êtes dans un gestionnaire de bouton. Puis effectuez la validation et marquez manuellement les champs comme invalide avec field.markinvalid ("...")
En ce qui concerne @chrisr commentaire sur l'obtention d'une référence. Les chances sont vos champs sont dans le même conteneur. Vous pouvez donc facilement obtenir une référence à l'autre champ à l'intérieur de la fonction Validator. Ceci à l'intérieur de la fonction est le champ de texte sur lequel le validateur est configuré. Obtenez une référence à l'autre champ à l'aide de: var autrefield = this.up (). Down ('champ [nom = champ_one]') (extjs 4)
Définition du champ: suivant dans INITComponent (ou auditeur si vous préférez): P> this._validate_name2: function ( ) {
if ( this.name1.getValue () == this.name2.getValue () ) {
this.name2.markInvalid ( 'field does not match name1' );
this.name2.setValue ( null );
}
}
Je me suis moqué d'un exemple de la façon dont je fais cela avec des comboboxes dans EXT JS 5.1 ... Il est facilement portable avec le code ext 4, vous devez simplement utiliser initcomponent code>. de ViewController's init code>. Voici le code (et 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()
});
}
});
Remarque mineure: généralement des classes sont définies en dehors de l'appel à ext.application
Pour valider les champs liés Je crée habituellement une fonction (j'ajoute ceci à mon Voici un exemple: et voici un Exemple Fiddle avec sélection Timespan. ext.lib.validators de sorte que je peux l'appeler dans une application entière) qui renvoie une fonction anonyme avec une logique de portée et de validation préconfigurées (Donc, je peux l'utiliser plusieurs fois sur mon application).
Généralement - je suggérerais de connecter les auditeurs d'événements de changement sur tous les champs nécessaires à la validation croisée. Dans le gestionnaire d'événements de changement, nous devons déclencher une validation sur tous les autres champs nécessaires à la validation avec le champ modifié. Cette approche fonctionne très bien lorsque vous avez une forme et il y a beaucoup de champs et beaucoup de validations doivent être effectuées.