[SOLVED]Start and End Date validation

[sturobinson1972]

Having an issue on a form validating the start and end dates.

The dates are two separate fields but the values need to be compared when one is changed and error if the start date begins after the end date.

I've created a listener against each field but it appears to validate both fields even though only one has been changed.
This is resulting in the first field getting reset and therefore I have to error both fields in each validation procedure.

I expected when an error was found that its immediately returned to the form and displays, but I may not be controlling the form correctly.

main.js file
'maintenanceform #PRAS051': {
change: this.goValidateAllocationPRAS051
},
'maintenanceform #PRAE051': {
change: this.goValidateAllocationPRAE051
},

goValidateAllocationPRAE051: function(field, record) {

// Use new field value for validation;
endDate = record;
// Retrieve original value;
startDate = this.getMaintenanceForm().getForm().getRecord().da ta.PRAS051;

// If fields not yet populated or just cleared then exit;
if (startDate === 0 && endDate === 0) {
return;
}
// Check whether or not date meets correct criteria;
if (startDate > endDate) {

// Mark the relevant field incorrect;
if (field.name === 'PRAE051') {
this.getMaintenanceForm().down('#PRAE051').markInv alid('End Date begins before Start Date');
this.getMaintenanceForm().down('#PRAS051').markInv alid('Start Date begins after End Date');
this.getMaintenanceForm().getForm().getRecord().is Valid().PRAE051 = false;
this.getMaintenanceForm().getForm().getRecord().is Valid().PRAS051 = false;
}
return 0;
} else {
this.getMaintenanceForm().getForm().getRecord().is Valid().PRAE051 = true;
}
},

If the fields are corrected and the form is reset the error appears to hang around, initially errors on a new record until you click into the field.

[Johnny Major]

You could add two custom vTypes to your application.

Here is an example of two custom vTypes that are making sure the from date is not greater than the to date.

In your main.js controller add your custom vTypes in the init function.

        //add the datefield validation to vtypes
        //
        Ext.apply(Ext.form.field.VTypes, {
            fromDate: function(value, field) {
                if (field.parseDate(value) !== null){
                    var toDateFld = this.getSearchToDate(),
                        fromDate = Ext.Date.format(field.getValue(), 'ymd'),
                        toDate = Ext.Date.format(toDateFld.getValue(), 'ymd');
                    if (fromDate > toDate){
                        return false;
                    } else {
                        toDateFld.clearInvalid();
                        return true;
                    }
                } else {
                    return true;
                }
            },
            fromDateText: 'Start Date begins after End Date',
            toDate: function(value, field) {
                if (field.parseDate(value) !== null){
                    var fromDateFld = this.getSearchFromDate(),
                        fromDate = Ext.Date.format(fromDateFld.getValue(), 'ymd'),
                        toDate = Ext.Date.format(field.getValue(), 'ymd');
                    if (fromDate > toDate){
                        return false;
                    } else {
                        fromDateFld.clearInvalid();
                        return true;
                    }
                } else {
                    return true;
                }
            },
            toDateText: 'End Date begins before Start Date'
        },this);

Where you see this.getSearchToDate() & this.getSearchFromDate() those are just refs I created for both my from/to dates.


Now just add your Vtype to your two date fields.

{
                xtype : 'datefield',
                itemId : 'fromdate',
                allowBlank : false,
                vtype : 'fromDate',
                fieldLabel : 'From Date',
                labelWidth : 60,
                width : 160
            },{
                xtype : 'tbspacer'
            },{
                xtype : 'tbseparator'
            },{
                xtype : 'datefield',
                itemId : 'todate',
                allowBlank : false,
                vtype : 'toDate',
                fieldLabel : 'To Date',
                labelWidth : 50,
                width : 150
            }

[sturobinson1972]

Thanks for help Johnny I've applied the code and the its almost working correctly.

I wasn't sure exactly how to use the this.getSearchFromDate() so instead
I'm populating the toDateFld from the "field" parameter, this is ensuring the field is reset after correction.
I'm populating the toDate field direct from the form.

Example:
fromDate = 2012-08-21
toDate = 2012-08-31
the form is valdiated correctly.

Change the fromDate to 2012-09-01
the form now errors, as expected.

Change the toDate to 2012-09-02
form still errors as the original dates are being compared not the changed dates.

Should I be using the getSearchFromDate() procedure to cater for this.

I've attached the code from the FORM and the CONTROLLER in case I've made any obvious mistakes.

Thanks

	init: function() {

    	Ext.apply(Ext.form.field.VTypes, {
			fromDate: function(value, field) {
				if (field.parseDate(value) !== null) {
                                    
					var toDateFld = field,
                    
						fromDate = Ext.Date.format(field.getValue(), 'ymd');
                        toDate = Ext.Date.format(this.getMaintenanceForm().getForm().getRecord().data.PRAE051, 'ymd');
                                         
					if (fromDate > toDate) {
						return false;
					} else {
						toDateFld.clearInvalid();
                        return true;
					}
				} else {
					return true;
				}
			},
			fromDateText: 'Start Date begins after End Date',
            
			toDate: function(value, field) {
				if (field.parseDate(value) !== null) {
                    
                    var fromDateFld = field,                    
                        
                        fromDate = Ext.Date.format(this.getMaintenanceForm().getForm().getRecord().data.PRAS051, 'ymd');
						toDate = Ext.Date.format(field.getValue(), 'ymd');
                        
					if (fromDate > toDate) {
						return false;
					} else {
						fromDateFld.clearInvalid(); 
						return true;
					}
				} else {
					return true;
				}
			},
			toDateText: 'End Date begins before Start Date'
		}, this);

		}, {
            xtype : 'basedatefield',
            itemId : 'PRAS051',
            name: 'PRAS051',
            allowBlank : false,
            vtype : 'fromDate',
            fieldLabel: iwmlit.pras,
            labelWidth : 135,
            width : 250,
            format: 'd-m-Y'
		}, {    
            xtype : 'basedatefield',
            itemId : 'PRAE051',
            name: 'PRAE051',
            allowBlank : false,
            vtype : 'toDate',
            fieldLabel: iwmlit.prae,
            labelWidth : 135,
            width : 250,        
            format: 'd-m-Y'

[Johnny Major]

When using the getRecord method off a form it will return you the currently loaded record if one was loaded via the loadRecord method. That will not have your changed field values in your form after the record was loaded.

Give this a try

        //add the datefield validation to vtypes
        //
        Ext.apply(Ext.form.field.VTypes, {
            fromDate: function(value, field) {
                if (field.parseDate(value) !== null){
                    var toDateFld = this.getMaintenanceForm().down('#PRAE051'),
                        fromDate = Ext.Date.format(field.getValue(), 'ymd'),
                        toDate = Ext.Date.format(toDateFld.getValue(), 'ymd');
                    if (fromDate > toDate){
                        return false;
                    } else {
                        toDateFld.clearInvalid();
                        return true;
                    }
                } else {
                    return true;
                }
            },
            fromDateText: 'Start Date begins after End Date',
            toDate: function(value, field) {
                if (field.parseDate(value) !== null){
                    var fromDateFld = this.getMaintenanceForm().down('#PRAS051'),
                        fromDate = Ext.Date.format(fromDateFld.getValue(), 'ymd'),
                        toDate = Ext.Date.format(field.getValue(), 'ymd');
                    if (fromDate > toDate){
                        return false;
                    } else {
                        fromDateFld.clearInvalid();
                        return true;
                    }
                } else {
                    return true;
                }
            },
            toDateText: 'End Date begins before Start Date'
        },this);

Thanks!

[sturobinson1972]

Spot on, that works great now Johnny.

Thanks for your help.