Question

I am facing a problem using jqgrid in “custom edit mode”.
I built the grid correctly with the buttons to edit / save / cancel / delete for each row.
For each button I bind a function to each operation (save, save, etc.)
My problem now is that when trying to check if the field is valid, the verification function is performed and the error dialog is triggered, but the value is submitted to the database, and the row is not kept in “edit mode” for the user correct the error.

I also wonder if it is possible to suppress the in-built error dialog, and just to highlight the fields with the error. the error messages would be shown as a summary in a div.

Thank you for your attention

My example with relevant code

// function to retrieve data to jqgrid
getList();

// grid configuration

$("#list").jqGrid({
    datatype: "local",
    width: 465,
    colNames: ["ID", "Descrição", ""],
    colModel: [
          { name: "id", index: "id", sorttype: "int", hidden: true },
          { name: "descr", index: "descr", editable: true, edittype: "text", editrules: { custom: true, custom_func: checkvalid }
          },
          { name: "action", index: "action", sortable: false, width: 90, search: false} // Botões

        ],
    loadtext: 'A carregar...',
    rowNum: 20,
    rowList: [20, 40, 80, 100, 200],
    ignoreCase: true,
    pager: "#pager",
    sortname: "id",
    viewrecords: true,
    sortorder: "asc",
    caption: "Gestão de tipos",

    gridComplete: function() {
        //load edit buttons
        var ids = $("#list").jqGrid("getDataIDs");
        for (var k = 0; k < ids.length; k++) {
            var id = ids[k];
            var html = "";
            html += "<input id=\"btnEdit" + id + "\" type=\"button\" class=\"JQbutton\" value=\"Editar\" onclick=\"jqGrid_editRow('" + id + "');\"  />";
            html += "<input id=\"btnDelete" + id + "\" type=\"button\" class=\"JQbutton\" value=\"Apagar\" onclick=\"jqGrid_deleteRow('" + id + "');\"  />";
            html += "<input id=\"btnSave" + id + "\" style=\"display: none;\" class=\"JQbutton\" type=\"submit\" value=\"Guardar\" onclick=\"jqGrid_doSave(" + id + ");\"  />";
            html += "<input id=\"btnCancel" + id + "\" style=\"display: none;\" class=\"JQbutton\" type=\"button\" value=\"Cancelar\" onclick=\"jqGrid_restoreRow('" + id + "');\" />";
            $("#list").jqGrid("setRowData", id, { action: html });
        }
    }

});


function checkvalid(value, colname) {
    //-... code to validate field 

    return [false, "testing validation"];

}

Answer 1

You can validate the form fields in the beforeSubmit function. In this function you can validate the fields and add the highlight class to the element you want. You can do something like this:

beforeSubmit: function(postdata, formid){ 
       //more validations
       if ($('#exec').val()==""){
                $('#exec').addClass("ui-state-highlight");
                return [false,'ERROR MESSAGE']; //error
      }
      return [true,'']; // no error
 },