New row in slickgrid, Validator does not fire

Question

I have the requiredFieldValidator configured for one of my columns and it works as expected for existing rows. When I tab thru, or click to begin editing a new row, the validator does not fire when moving off the column. When move off the new row (with no data in the column) so that it commits, and then move back to the row, now the validator works...but ONLY if I put some data in the editor, and then delete it.

In other words, for new rows, the requiredFieldValidator does not do anything until I actually type something in the column. If I leave a column blank it never fires, defeating the purpose of it. Interestingly, the example they provide (http://mleibman.github.com/SlickGrid/examples/example3-editing.html) exhibits the same problem.

Answer 1

This checks for both values being "". I believe this should return true since a validator could be a "required" validator.

 this.isValueChanged = function () {
  // this needs to validate if both are empty since a validator might be a "required" validator
  if ($input.val() == "" && defaultValue == "")
    return true;
  else 
    return (!($input.val() == "" && defaultValue == "")) && ($input.val() != defaultValue);
};

Preferred method would be to create a custom editor so you aren't mucking with the core library.

Answer 2

I concur, just encountered this behavior myself. Here is the solution.

Change this.isValueChanged function contents to the following.

if(($input.val().length > 0) && ($input.val() != defaultValue))
            return true;
    else if(($input.val() == defaultValue)&&($input.val().length > 0))
            return true;
    else if(($input.val().length == 0) && ((undefined === defaultValue )||(defaultValue == "")))
            return true;
    else
            return false;

For some reason defaultValue is not set during the first interraction, my guess if you initialize it to "" you would not need to check for undefined.

At any rate defaultValue holds the previous value of the cell, so when it is empty and it is the first cell being edited it is undefined, after that it is set to "" for all other empty cells.

The problem is this function needs to tell the grid that the value has changed in order for the cell editor to validate the input. In the provided implementation the expression always returns false because

$input.val() == "" evaluates to true and then the expression 
!($input.val() == "" && defaultValue == null)) evaluates to false

This means defaultValue is continuously undefined.

Hope that makes sense and my code helps you out.

Answer 3

Had the same problem and I believe that ideally defaultValue should be set to undefined or null, when it wasn't initialized. So I've modified TextEditor in a following way:

function TextEditor(args) {
    var $input;
    var defaultValue;
    var scope = this;

    this.loadValue = function (item) {
        defaultValue = item[args.column.field] || null;
        $input.val(defaultValue);
        $input[0].defaultValue = defaultValue;
        $input.select();
    };

    this.isValueChanged = function () {
        return $input.val() != defaultValue;
    };

    ....

setting default defaultValue to null and simplifying isValueChanged.

Answer 4

There is an error in the first else if of Roman, the return is false. Otherwise, any change in cell returns true even if the value has not been changed. I tried this and it works.

this.isValueChanged = function () {
        var attuale = $input.val();
        if((attuale.length > 0) && (attuale != defaultValue))
            return true;
        else if((attuale == defaultValue)&&(attuale.length > 0))
            return false;
        else if((attuale.length == 0) && ((undefined === defaultValue )||(defaultValue == "")))
            return true;
        else
            return false;
};