Jqgrid editable and validation problem

jQuery("#ShiftMasterGrid").jqGrid({
       datatype: 'local',
       editurl: 'AddNewShift',
       colNames: [
           'ShiftNo', 'Shift Code', 'Shift Description', 'Shift ShortName', 'Shift Start Time', 'Shift End Time', 'Shift Sequence', 'Type'
       ],
       colModel:
       [
           { name: 'ShiftNo', formatter: ShiftNoColumnFormatter, index: 'ShiftNo', align: 'left', editable: false, hidden: true },
           {
               name: 'ShiftCode',
               index: 'ShiftCode',
               align: 'center',
               editable: true,
               width: 100,
               formatter: ShiftCodeColumnFormatter,

               editrules: { required: true }

           },
           { name: 'ShiftDescription', formatter: ShiftDescriptionColumnFormatter, index: 'ShiftDescription', align: 'center', editable: false, editrules: { required: true } },
           { name: 'ShiftShortName', formatter: ShiftShortNameColumnFormatter, index: 'ShiftShortName', align: 'center', editable: true, editrules: { required: true } },
           {
               name: 'ShiftStartTime',
               index: 'ShiftStartTime',
               formatter: ShiftStartTimeColumnFormatter,
              editable: true,
               editoptions: {
                   dataInit: function(element) {
                       $(element).timepicker({
                           onSelect: function() {
                           }
                       });
                   }
               },
               align: 'center',
               edittable: true,
               editrules: { required: true, time: true }

           },
           {
               name: 'ShiftEndTime',
               index: 'ShiftEndTime',
               formatter: ShiftEndTimeColumnFormatter,
              editable: true,
               editoptions: {
                   dataInit: function(element) {
                           $(element).timepicker({
                           onSelect: function() {
                           }
                       });
                   }
               },
               align: 'center',
               editrules: { required: true, time: true }

           },
           { name: 'ShiftSequence', index: 'ShiftSequence', align: 'center', editable: true, width: 100, formatter: ShiftSequenceColumnFormatter, editrules: { required: true, number: true } },
           { name: 'Type', index: 'Type', editable: true, editoptions: { defaultValue: 'Insert' }, hidden: true, align: 'left' }
       ],

       footerrow: true,
       userDataOnFooter: true,
       unformat: unformatNullColumn,
       pager: '#pagerGrid',
       //width: '100%',
       height: 250,
       rowNum: 2,
       rowList: [3, 5, 10],
       sortname: 'id',
       sortorder: "asc",
       viewrecords: true,
       gridview: true,
       'cellEdit': true,
       cellsubmit: 'clientArray',
       loadonce: true,
       rownumbers: true,
       jsonReader: {
           root: "rows",
           page: "page",
           total: "total",
           records: "records",
           repeatitems: false,
           cell: "cell",
           id: "ShiftId"
       },
       autowidth: '70%',
       ignoreCase: true,



       afterSaveCell: function(id) {
           var rowData = $('#ShiftMasterGrid').jqGrid('getRowData', id);
           $('#ShiftMasterGrid').jqGrid('setRowData', id, rowData);

       }
   });




   var iShiftNo = 0;
   function ShiftNoColumnFormatter(cellvalue, options, rowObject) {

       iShiftNo++;

       return "<input  name='ShiftNo' type='text' role='textbox'   value='" + cellvalue + " ' id='" + iShiftNo + "_ShiftNo' class='ShiftNo' />";
   }

   var iShiftCode= 0;
   function ShiftCodeColumnFormatter(cellvalue, options, rowObject) {

       iShiftCode++;

       return "<input  name='ShiftCode' type='text' role='textbox'   value='" + cellvalue + " ' id='" + iShiftCode + "_ShiftCode' class='ShiftCode' />";
   }


   var iShiftDescription = 0;
   function ShiftDescriptionColumnFormatter(cellvalue, options, rowObject) {

       iShiftDescription++;

       return "<input  name='ShiftDescription' type='text' role='textbox'   value='" + cellvalue + " ' id='" + iShiftDescription + "_ShiftDescription' class='ShiftDescription' />";
   }

   var iShiftShortName = 0;
   function ShiftShortNameColumnFormatter(cellvalue, options, rowObject) {

       iShiftShortName++;

       return "<input  name='ShiftShortName' type='text' role='textbox'   value='" + cellvalue + " ' id='" + iShiftShortName + "_ShiftShortName' class='ShiftShortName' />";
   }



   var iShiftStartTime = 0;
   function ShiftStartTimeColumnFormatter(cellvalue, options, rowObject) {

       iShiftStartTime++;

       return "<input  name='ShiftStartTime' type='text' role='textbox'   value='" + cellvalue + " ' id='" + iShiftStartTime + "_ShiftStartTime' class='ShiftStartTime timepicker' />";
   }
   var iShiftEndTime = 0;
   function ShiftEndTimeColumnFormatter(cellvalue, options, rowObject) {

       iShiftEndTime++;

       return "<input  name='ShiftEndTime' type='text' role='textbox'   value='" + cellvalue + " ' id='" + iShiftEndTime + "_ ShiftEndTime' class='ShiftEndTime timepicker' />";
   }
   var iShiftSequence = 0;
   function ShiftSequenceColumnFormatter(cellvalue, options, rowObject) {

       iShiftSequence++;

       return "<input  name='ShiftSequence' type='text' role='textbox'   value='" + cellvalue + " ' id='" + iShiftSequence + "_ ShiftSequence' class='ShiftSequence' />";
   }