SmartClient version:
SmartClient Ajax RIA system
Version v11.1p_2017-08-16/Pro Deployment (2017-08-16)
Browser: Chrome Version 66.0.3359.139 (Official Build) (64-bit)
(test bed to reproduce the problem is included at the end)
Given a DynamicForm that contains 7 fields
message: ___________
Start Date: _____________
End Date: _____________
message2: _____________
Start Date2: _____________
End Date2: _____________
message3: _____________
The fields Start Date, End Date, Start Date2, End Date2 has the DateItem editor type.
A validator is attached to these date fields in order to validate that the from date is not later than the to date.
The Problem:
when entering data in fields using "Tab" key to navigate from field to field, when the "Start Date2" field is filled with a valid date and 'Tab' is pressed, the cursor is positioned on the "End Date" field instead of the expected "End Date2" field ( the field that follow "Start Date2".
To reproduce the problem, we must insert a valid date in the date fields with the keyboard, don't use the date chooser. All Fields must be entered and use 'Tab' to navigate from field to field.
Moreover, if the validation is removed from the Date fields, there is no problem, the focus is on "End Date2" after entering a value in "Start Date2" and pressing "Tab".
<body>
<script type="text/javascript">
// Copyright (c) MEI Computer Technology Group Inc, 2012
/**
* @fileOverview Definition for the AllowanceUtils class.
*/
//----------------------------------------------------------------------------------------------------------------------------
// AllowanceUtils class definition
//----------------------------------------------------------------------------------------------------------------------------
var AllowanceUtils = isc.defineClass('AllowanceUtils', 'Class');
//-----------------------------
// Static class members
//-----------------------------
AllowanceUtils.addClassProperties
({
//----------------------------------------------------------------------------------------------------------------------------
createStartAndEndDateFields : function(startProperties, endProperties)
{
var startBaseProperties =
{
name : 'startDate',
editorType : 'DateItem',
useTextField : true,
showTitle : true,
title : 'Start Date'
};
var endBaseProperties =
{
name : 'endDate',
editorType : 'DateItem',
useTextField : true,
showTitle : true,
title : 'End Date'
};
var startDateField = isc.addProperties(startBaseProperties, startProperties);
var endDateField = isc.addProperties(endBaseProperties, endProperties);
// When not set, the end-date will default to start-date (without setting the date,
// this is only to position the calendar popup).
var startDateFieldName = startDateField['name'];
endDateField['getDefaultChooserDate'] =
function()
{
return this.form.getValue(startDateFieldName);
};
DateValidation.attachFromToDateValidation
(
startDateField,
endDateField,
{ errorMessage : 'wrong date' }
);
return [ startDateField, endDateField ];
}
});
// Copyright (c) MEI Computer Technology Group Inc, 2008
/**
* @fileOverview Definition for the DateValidation class.
*/
//----------------------------------------------------------------------------------------------------------------------------
/*
* Util class to validate dates in forms.
*/
//----------------------------------------------------------------------------------------------------------------------------
var Validation = isc.ClassFactory.defineClass('Validation', 'Class');
//-----------------------------
//Static class members
//-----------------------------
Validation.addClassProperties
({
//----------------------------------------------------------------------------------------------------------------------------
addValidatorToField : function(field, validator)
{
if (field && validator)
{
// Make sure we really received an array
if (! isc.isA.Array(validator))
{
validator = [ validator ];
}
if (! field.validators)
{
field.validators = validator;
}
else
{
field.validators.addList(validator);
}
}
}
});
//----------------------------------------------------------------------------------------------------------------------------
// DateValidation class definition
//----------------------------------------------------------------------------------------------------------------------------
var DateValidation = isc.ClassFactory.defineClass('DateValidation', 'Class');
//-----------------------------
//Static class members
//-----------------------------
DateValidation.addClassProperties
({
//----------------------------------------------------------------------------------------------------------------------------
attachFromToDateValidation : function(fromDateField, toDateField, validatorProperties)
{
if (fromDateField && toDateField)
{
var fromValidator =
DateValidation.getFromToDateValidator(
toDateField['name'],
isc.addProperties({ fldNameFrom : fromDateField['name'], fldNameTo : toDateField['name'] }, validatorProperties)
);
Validation.addValidatorToField(fromDateField, fromValidator);
var toValidator =
DateValidation.getFromToDateValidator(
fromDateField['name'],
isc.addProperties({ fldNameFrom : fromDateField['name'], fldNameTo : toDateField['name'] }, validatorProperties)
);
Validation.addValidatorToField(toDateField, toValidator);
}
},
//----------------------------------------------------------------------------------------------------------------------------
getFromToDateValidator : function(fldNameOther, properties)
{
var baseProperties =
{
type : 'custom',
dependentFields : [ fldNameOther ],
errorMessage : 'wrong date',
validateOnChange : true,
condition : DateValidation.validateFromDateToDate
};
var mergedProperties = null;
if (properties)
{
mergedProperties = isc.addProperties(baseProperties, properties);
}
else
{
mergedProperties = baseProperties;
}
return mergedProperties;
},
//----------------------------------------------------------------------------------------------------------------------------
/**
* Returns if the From date and To date criteria are valid.
* Valid if at least one value is null or From <= To
*/
//----------------------------------------------------------------------------------------------------------------------------
validateFromDateToDate: function (item, validator, value, record)
{
var isValid =
(
(!record[validator.fldNameFrom]) ||
(!record[validator.fldNameTo])
);
if (! isValid)
{
var startDateRecord;
var endDateRecord;
if (item.form)
{
var startDateField = item.form.getField(validator.fldNameFrom);
var endDateField = item.form.getField(validator.fldNameTo);
if(startDateField && endDateField)
{
if(startDateField.isA('ComboBoxItem') && endDateField.isA('ComboBoxItem'))
{
startDateRecord = startDateField.getSelectedRecord();
endDateRecord = endDateField.getSelectedRecord();
if (startDateRecord && endDateRecord)
{
startDateRecord = startDateRecord.startDate;
endDateRecord = endDateRecord.endDate;
}
}
else
{
startDateRecord = record[validator.fldNameFrom];
endDateRecord = record[validator.fldNameTo];
}
}
}
else
{
startDateRecord = record[validator.fldNameFrom];
endDateRecord = record[validator.fldNameTo];
}
// Both fields contain something, we compare the values only if they are valid dates.
if (isc.isA.Date(startDateRecord) && isc.isA.Date(endDateRecord))
{
isValid = (startDateRecord <= endDateRecord);
}
else
{
// At least a field does not contain a valid date, we pretend the content is valid.
// The Date validator will complain about it.
isValid = true;
}
}
return isValid;
}
});
var startAndEndDates = AllowanceUtils.createStartAndEndDateFields
(
{
title : 'Start Date',
width : 100
},
{
title: 'End Date',
width : 100
}
);
var startAndEndDates2 = AllowanceUtils.createStartAndEndDateFields
(
{
title : 'Start Date2',
width : 100,
name : 'startDate2'
},
{
title: 'End Date2',
name : 'endDate2',
width : 100
}
);
var form = isc.DynamicForm.create({
showErrorText : true,
showErrorIcons : true,
numCols : 1,
width : 300,
fields : [
{
name : 'message',
title : 'message',
showTitle : true
},
startAndEndDates[0],
startAndEndDates[1],
{
name : 'message2',
title : 'message2',
showTitle : true
},
startAndEndDates2[0],
startAndEndDates2[1],
{
name : 'message3',
title : 'message3',
showTitle : true
}
]
});
form.show();
</script>
</body>
SmartClient Ajax RIA system
Version v11.1p_2017-08-16/Pro Deployment (2017-08-16)
Browser: Chrome Version 66.0.3359.139 (Official Build) (64-bit)
(test bed to reproduce the problem is included at the end)
Given a DynamicForm that contains 7 fields
message: ___________
Start Date: _____________
End Date: _____________
message2: _____________
Start Date2: _____________
End Date2: _____________
message3: _____________
The fields Start Date, End Date, Start Date2, End Date2 has the DateItem editor type.
A validator is attached to these date fields in order to validate that the from date is not later than the to date.
The Problem:
when entering data in fields using "Tab" key to navigate from field to field, when the "Start Date2" field is filled with a valid date and 'Tab' is pressed, the cursor is positioned on the "End Date" field instead of the expected "End Date2" field ( the field that follow "Start Date2".
To reproduce the problem, we must insert a valid date in the date fields with the keyboard, don't use the date chooser. All Fields must be entered and use 'Tab' to navigate from field to field.
Moreover, if the validation is removed from the Date fields, there is no problem, the focus is on "End Date2" after entering a value in "Start Date2" and pressing "Tab".
<body>
<script type="text/javascript">
// Copyright (c) MEI Computer Technology Group Inc, 2012
/**
* @fileOverview Definition for the AllowanceUtils class.
*/
//----------------------------------------------------------------------------------------------------------------------------
// AllowanceUtils class definition
//----------------------------------------------------------------------------------------------------------------------------
var AllowanceUtils = isc.defineClass('AllowanceUtils', 'Class');
//-----------------------------
// Static class members
//-----------------------------
AllowanceUtils.addClassProperties
({
//----------------------------------------------------------------------------------------------------------------------------
createStartAndEndDateFields : function(startProperties, endProperties)
{
var startBaseProperties =
{
name : 'startDate',
editorType : 'DateItem',
useTextField : true,
showTitle : true,
title : 'Start Date'
};
var endBaseProperties =
{
name : 'endDate',
editorType : 'DateItem',
useTextField : true,
showTitle : true,
title : 'End Date'
};
var startDateField = isc.addProperties(startBaseProperties, startProperties);
var endDateField = isc.addProperties(endBaseProperties, endProperties);
// When not set, the end-date will default to start-date (without setting the date,
// this is only to position the calendar popup).
var startDateFieldName = startDateField['name'];
endDateField['getDefaultChooserDate'] =
function()
{
return this.form.getValue(startDateFieldName);
};
DateValidation.attachFromToDateValidation
(
startDateField,
endDateField,
{ errorMessage : 'wrong date' }
);
return [ startDateField, endDateField ];
}
});
// Copyright (c) MEI Computer Technology Group Inc, 2008
/**
* @fileOverview Definition for the DateValidation class.
*/
//----------------------------------------------------------------------------------------------------------------------------
/*
* Util class to validate dates in forms.
*/
//----------------------------------------------------------------------------------------------------------------------------
var Validation = isc.ClassFactory.defineClass('Validation', 'Class');
//-----------------------------
//Static class members
//-----------------------------
Validation.addClassProperties
({
//----------------------------------------------------------------------------------------------------------------------------
addValidatorToField : function(field, validator)
{
if (field && validator)
{
// Make sure we really received an array
if (! isc.isA.Array(validator))
{
validator = [ validator ];
}
if (! field.validators)
{
field.validators = validator;
}
else
{
field.validators.addList(validator);
}
}
}
});
//----------------------------------------------------------------------------------------------------------------------------
// DateValidation class definition
//----------------------------------------------------------------------------------------------------------------------------
var DateValidation = isc.ClassFactory.defineClass('DateValidation', 'Class');
//-----------------------------
//Static class members
//-----------------------------
DateValidation.addClassProperties
({
//----------------------------------------------------------------------------------------------------------------------------
attachFromToDateValidation : function(fromDateField, toDateField, validatorProperties)
{
if (fromDateField && toDateField)
{
var fromValidator =
DateValidation.getFromToDateValidator(
toDateField['name'],
isc.addProperties({ fldNameFrom : fromDateField['name'], fldNameTo : toDateField['name'] }, validatorProperties)
);
Validation.addValidatorToField(fromDateField, fromValidator);
var toValidator =
DateValidation.getFromToDateValidator(
fromDateField['name'],
isc.addProperties({ fldNameFrom : fromDateField['name'], fldNameTo : toDateField['name'] }, validatorProperties)
);
Validation.addValidatorToField(toDateField, toValidator);
}
},
//----------------------------------------------------------------------------------------------------------------------------
getFromToDateValidator : function(fldNameOther, properties)
{
var baseProperties =
{
type : 'custom',
dependentFields : [ fldNameOther ],
errorMessage : 'wrong date',
validateOnChange : true,
condition : DateValidation.validateFromDateToDate
};
var mergedProperties = null;
if (properties)
{
mergedProperties = isc.addProperties(baseProperties, properties);
}
else
{
mergedProperties = baseProperties;
}
return mergedProperties;
},
//----------------------------------------------------------------------------------------------------------------------------
/**
* Returns if the From date and To date criteria are valid.
* Valid if at least one value is null or From <= To
*/
//----------------------------------------------------------------------------------------------------------------------------
validateFromDateToDate: function (item, validator, value, record)
{
var isValid =
(
(!record[validator.fldNameFrom]) ||
(!record[validator.fldNameTo])
);
if (! isValid)
{
var startDateRecord;
var endDateRecord;
if (item.form)
{
var startDateField = item.form.getField(validator.fldNameFrom);
var endDateField = item.form.getField(validator.fldNameTo);
if(startDateField && endDateField)
{
if(startDateField.isA('ComboBoxItem') && endDateField.isA('ComboBoxItem'))
{
startDateRecord = startDateField.getSelectedRecord();
endDateRecord = endDateField.getSelectedRecord();
if (startDateRecord && endDateRecord)
{
startDateRecord = startDateRecord.startDate;
endDateRecord = endDateRecord.endDate;
}
}
else
{
startDateRecord = record[validator.fldNameFrom];
endDateRecord = record[validator.fldNameTo];
}
}
}
else
{
startDateRecord = record[validator.fldNameFrom];
endDateRecord = record[validator.fldNameTo];
}
// Both fields contain something, we compare the values only if they are valid dates.
if (isc.isA.Date(startDateRecord) && isc.isA.Date(endDateRecord))
{
isValid = (startDateRecord <= endDateRecord);
}
else
{
// At least a field does not contain a valid date, we pretend the content is valid.
// The Date validator will complain about it.
isValid = true;
}
}
return isValid;
}
});
var startAndEndDates = AllowanceUtils.createStartAndEndDateFields
(
{
title : 'Start Date',
width : 100
},
{
title: 'End Date',
width : 100
}
);
var startAndEndDates2 = AllowanceUtils.createStartAndEndDateFields
(
{
title : 'Start Date2',
width : 100,
name : 'startDate2'
},
{
title: 'End Date2',
name : 'endDate2',
width : 100
}
);
var form = isc.DynamicForm.create({
showErrorText : true,
showErrorIcons : true,
numCols : 1,
width : 300,
fields : [
{
name : 'message',
title : 'message',
showTitle : true
},
startAndEndDates[0],
startAndEndDates[1],
{
name : 'message2',
title : 'message2',
showTitle : true
},
startAndEndDates2[0],
startAndEndDates2[1],
{
name : 'message3',
title : 'message3',
showTitle : true
}
]
});
form.show();
</script>
</body>
Comment