I’m using a custom function to validate my jqgrid. The users wish to enter hours worked in a day as Hour:Minute format (e.g., 7:30, 8:00). The validation rule needs to return false whenever a work day exceeds 20 hours and 1 minute. The validation function works in that it flags the error, but firebug displays a 2nd error: b(":input:visible", a.w)[0] is undefined, and points to line 379 in the library (version 4.1.2).
Help is appreciated!
Here’s the grid and the custom validation:
WorkSchedule.prototype.init = function() {
var self = this;
self.jqgridParms = {
datatype: "local",
height: 'auto',
width: 700,
colNames: ["Week", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Total"],
colModel: [// very much dummy stuff here.
{name: "Week", index: "Week", width: 50, editable: false },
{ name: "Sun", index: "Sun", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
dataInit: function(elem) {
$(elem).mask("99:99");
}
}, align: "center", formatter: timeEntryFormat, editrules: { custom: true, custom_func: validHourEntry }
},
{ name: "Mon", index: "Mon", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
dataInit: function(elem) {
$(elem).mask("99:99");
}
}, align: "center", formatter: timeEntryFormat, editrules: { custom: true, custom_func: validHourEntry }
},
{ name: "Tues", index: "Tues", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
dataInit: function(elem) {
$(elem).mask("99:99");
}
},
align: "center", formatter: timeEntryFormat, editrules: { custom: true, custom_func: validHourEntry }
},
{ name: "Wed", index: "Wed", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
dataInit: function(elem) {
$(elem).mask("99:99");
}
},
align: "center", formatter: timeEntryFormat, editrules: { custom: true, custom_func: validHourEntry }
},
{ name: "Thurs", index: "Thurs", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
dataInit: function(elem) {
$(elem).mask("99:99");
}
},
align: "center", formatter: timeEntryFormat, editrules: { custom: true, custom_func: validHourEntry }
},
{ name: "Fri", index: "Fri", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
dataInit: function(elem) {
$(elem).mask("99:99");
}
},
align: "center", formatter: timeEntryFormat, editrules: { custom: true, custom_func: validHourEntry }
},
{ name: "Sat", index: "Sat", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
dataInit: function(elem) {
$(elem).mask("99:99");
}
},
align: "center", formatter: timeEntryFormat, editrules: { custom: true, custom_func: validHourEntry }
},
{ name: "WeekTotal", index: "WeekTotal", width: 55, editable: true, align: "center" }
],
multiselect: false,
caption: "Manage Work Schedule",
rowNum: 10,
cellEdit: true,
gridComplete: function() {
calculateTotal();
},
beforeSaveCell: function(rowid, cellname, value, iRow, iCol) {
formatFromMask(rowid, cellname, value, iRow, iCol);
},
afterSaveCell: function() {
calculateTotal();
},
cellsubmit: "clientArray"
}
}
function validHourEntry(value, colname) {
var editSuccess = true;
var errorMsg = "";
if (typeof value === "undefined") {
editSuccess = false;
errorMsg = colname + " entry is required";
}
else if (value.length == 0) {
editSuccess = false;
errorMsg = colname + " entry is required";
}
else {
value = value.replace(/_/g, "0");
var hourMinSplit = value.lastIndexOf(":");
var hours = value.substring(0, hourMinSplit);
var mins = value.substring(hourMinSplit + 1, value.length);
if (isNaN(hours)) {
editSuccess = false;
errorMsg = "The value for hours must be numeric";
}
else if (isNaN(mins)) {
editSuccess = false;
errorMsg = "The value for minutes must be numeric";
}
else if (Number(hours) * 60 + Number(mins) > 1200) {
editSuccess = false;
errorMsg = "Work day entry must not exceed 20 hours and 00 minutes";
}
}
return [editSuccess, errorMsg];
}
function createWorkScheduleData(rowID) {
if (rowID == 0) {
return [ //goofy dummy data so I can test.
{Week: "Week 1", Sun: "00:00", Mon: "00:00", Tues: "00:00", Wed: "00:00", Thurs: "00:00", Fri: "00:00", Sat: "00:00" },
{ Week: "Week 2", Sun: "00:00", Mon: "00:00", Tues: "00:00", Wed: "00:00", Thurs: "00:00", Fri: "00:00", Sat: "00:00"}];
}
else if (rowID == 1) {
return [{ Week: "Week 1", Sun: "00:00", Mon: "08:00", Tues: "08:00", Wed: "08:00", Thurs: "08:00", Fri: "08:00", Sat: "00:00" },
{
Week: "Week 2", Sun: "00:00", Mon: "08:00", Tues: "08:00", Wed: "08:00", Thurs: "08:00", Fri: "08:00", Sat: "00:00"
}
];
}
else if (rowID == 2) {
return [{ Week: "Week 1", Sun: "00:00", Mon: "04:00", Tues: "04:00", Wed: "04:00", Thurs: "04:00", Fri: "04:00", Sat: "00:00" },
{
Week: "Week 2", Sun: "00:00", Mon: "04:00", Tues: "04:00", Wed: "04:00", Thurs: "04:00", Fri: "04:00", Sat: "00:00"
}
];
}
else if (rowID == 3) {
return [{ Week: "Week 1", Sun: "00:00", Mon: "07:30", Tues: "07:30", Wed: "07:30", Thurs: "07:30", Fri: "07:30", Sat: "00:00" },
{
Week: "Week 2", Sun: "00:00", Mon: "07:30", Tues: "07:30", Wed: "07:30", Thurs: "07:30", Fri: "07:30", Sat: "00:00"
}
];
}
}
This turns out to be an issue with Firebug, not with jqgrid. I’m posting this in case others get the same behavior. I turned off Firebug and my validation worked as expected. It also works with chrome and IE without any javascript errors. Annoyed I didn’t think of trying it before posting the question, but happy it’s not a real issue.