How to create a required field validator in a grid

[ryan paulParticipant]

I want to check if all the required field and if all values are valid before going to the next row or before adding a new row.

[Peter StoevKeymaster]

Hi ryan paul,

In our Grid Editing sample, the Ship Date, Quantity and Price columns have cell validation i.e when the user enters an invalid value, the Grid will display a prompt message and the cell will be in edit mode until a valid value is entered.

Please, take a look at the “validation” functions in the code below:

      $("#jqxgrid").jqxGrid(
            {
                width: 680,
                source: dataAdapter,
                editable: true,
                theme: theme,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80 },
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
                  { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, cellsalign: 'right', cellsformat: 'd',
                  validation: function (cell, value) {
                          if (value == "")
                             return true;
                          var year = value.getFullYear();
                          if (year >= 2013) {
                              return { result: false, message: "Ship Date should be before 1/1/2013" };
                          }
                          return true;
                      }
                  },
                  { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 150) {
                              return { result: false, message: "Quantity should be in the 0-150 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                      }
                  },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 15) {
                              return { result: false, message: "Price should be in the 0-15 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      }
                  }
                ]
            });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ryan paulParticipant]

i have a grid that when all the fields have been filled up i have this button that will generate for a new row to accept the same requirements, and goes and on and on. I was thinking how to do this like your demo in your jqxValidator that if it click the submit button it will prompt those validation that the user was not allowed to submit because he/she doesn’t entered the required fields. in your demo in the grid validation was only triggered when i am in the cell.

i want that before i can add a row i want to validate first all the fields in the current row.

[Author]

Posts