Handsontable 入力バリデーションの捕捉

先日に続いて、今度は Handsontable 入力バリデーションエラーを捕捉してみる。
つまり、任意の callback を実行するのが目的である。

type: 'numeric' のセルに数字でない文字を入力するとデフォルトではセルが赤くなるが、
そのタイミングを捕捉する方法である。

イベント callback で、afterValidate というのがある。
書式は、以下のとおり。
  afterValidate (isValid: Boolean, value: Mixed, row: Number, prop: String, source: String)


サンプル、先日のに当てはめると、、、

$('#example').handsontable({
   data: data,
   minSpareRows: 0,
   colHeaders: ["価格", "本数", "小計(税込)"],
   columns: [
               { data: "price" ,  type: 'numeric' , format: '0,0' },
               { data: "mt"    ,  type: 'numeric' },
               { data: "sts"   ,  type: 'numeric' , format: '0,0' , readOnly: true },
   ],
   contextMenu: false,
   onBeforeChange: function(changes, source){
      if (source==='edit'){
         row = changes[0][0];
         column = changes[0][1];
         changeValue = changes[0][3];
         if (column==='price'){
            data[row]['sts'] = changeValue * data[row]['mt'] * 1.08;
         }else if(column==='mt'){
            data[row]['sts'] = data[row]['price'] * changeValue * 1.08;
         }
      }
   },
   afterValidate: function (isValidvaluerowprop, source) {
      if (!isValid){
         columName = '';
         if (prop==='price'){
            columName = "'価格'列、"
         }else if(prop==='mt'){
            columName = "'本数'列、"
         }
         alert( (row+1) + ' 行目' + columName + 'の入力 "' + value + '" はエラーです' );
      }
   },
});

動作は、alert 表示、OKボタンをクリックすると、セルが赤くなる。

マニュアルをよく見ること!!!

Hooks - API Reference - Handsontable Documentation

prop は、セルのデータ名か、列番号 col が渡される。