Extjs remote combo validation issue

1
votes

HI, i am using extjs 3.2.1 lib and iam new to extjs,

I have implemented combobox with remote with filtering option in the form, i have added forceSelection(true) property to combo for validate the text with store collection and allowblank(false) to combo for enable form save button .

My problem is forceSelection property validates the control on the blur event only and clear the combo text , If the user enter the invalid text in the combo the save button is enabled(since i am only checked the allowblank(false) for combo) in the form, and when he hit the save button its gets submitted with invalid text in the combo.

I have checked the isvalid() method of form and combo also, inside the save event it also returning the 'true'.

How can i validate in this particular scenario ?

2
javascriptextjs

2 Answers

4
votes

Potentially you could override the validateValue function in the ComboBox, and if forceSelection is set to true check the raw value of the field against the store, like so:

Ext.override(Ext.form.ComboBox, {

validateValue : function(value) {

    var errs = this.getErrors(value);

    if((value || value != "") && this.forceSelection){
        var val = this.getRawValue(),
        rec = this.findRecord(this.displayField, val);

        if(!rec)
            errs.push("Invalid Selection"); 
    }

    var error = errs[0];

    if (error == undefined) {
        return true;
    } else {
        this.markInvalid(error);
        return false;
    }
}

});

0
votes

You can add an event listener for the blur event to validate the text entered by the user.

validateCombo = new function(field) {
    //business logic for your validation here.
    if(field.value == foo) { 
        //then do something
        field.isValid(true);  //the true boolean disables marking the field as invalid
    }
    else { 
       //do something else
       field.markInvalid('this field is invalid');
    }
}

var cb = new Ext.form.ComboBox({
// all of your config options
listeners:{
     scope: yourScope,
     'blur': validateCombo
}

});