Fork me on GitHub

Handsontable

a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery

Validation

Use the onBeforeChange callback to validate changes before they are applied to the table.

A
B
C
D
E
1KiaNissanToyotaHonda
2200810111213
3200920111413
4201030151213
5

Callback console: [[row, col, oldValue, newValue], ...]

Edit the above grid to see callback

var data = [
  ["", "Kia", "Nissan", "Toyota", "Honda"],
  ["2008", 10, 11, 12, 13],
  ["2009", 20, 11, 14, 13],
  ["2010", 30, 15, 12, 13]
];

$("#example1").handsontable({
  data: data,
  startRows: 8,
  startCols: 6,
  rowHeaders: true,
  colHeaders: true,
  minSpareRows: 1,
  contextMenu: true,
  onBeforeChange: function (data) {
    for (var i = data.length - 1; i >= 0; i--) {
      if (data[i][3] === "foo") {
        data.splice(i, 1); //gently don't accept the word "foo" (remove the change at index i)
      }
      else if (data[i][3] === "bar") {
        //if the word bar is given, add a ! at the end of it
        data[i][3] = data[i][3] + '!';
      }
      else if (data[i][3] === "nuke") {
        //if any of pasted cells contains the word "nuke", reject the whole paste
        return false;
      }
    }
  },
  onChange: function (data, source) {
    if (source === 'loadData') {
      return; //don't show this change in console
    }
    $("#example1console").text(JSON.stringify(data));
  }
});

For more examples, head back to the main page.

Handsontable © 2012 Marcin Warpechowski and contributors.
Code and documentation licensed under the The MIT License.