Question

My knowledge of jQuery and more specifically javascript has always been very limited and I am working hard to get better.

With that in mind I am trying to create some sort of “extensible validation framework” in that I can create an object with a validation function and its error message, push it into an array and then call all those methods and report the messages from the ones that fail.

So first I did something very simple just to see that the basic validation worked which was this:

var selectedTourDate = $("#tourDate").val();
var list = $("#bookedTourDate *");

var isDateBooked = list.filter(function () {
    return (this.innerHTML == selectedTourDate) ;
}).length !== 0;

if (isDateBooked) {
    alert("Date invalid");
    return;
}

This works fine.

Then I created my “framework” which is this:

function Validator(fn, errorMessage) {
    this.validationFunction = fn;
    this.errorMessage = errorMessage;
};

var validationRunner = {
    validators: [],
    errorMessages: [],
    validationResult: true,

    addValidation: function (validator) {
        validationRunner.validators.push(validator);
    },

    validate: function () {
        for (var validator = 0; validator < validationRunner.validators.length; validator++) {
            if (validationRunner.validators[validator] instanceof Validator) {
                var result = validationRunner.validators[validator].validationFunction();
                validationResult = validationRunner.validationResult && result;

                if (!result)
                    validationRunner.errorMessages.push(validationRunner.validators[validator].errorMessage);
            }
        }
    },

    getErrorMessage: function () {
        var message = "<ul>";

        for (var errorMessage = 0; errorMessage > validationRunner.errorMessages.length; errorMessage++) {
            message += "<li>" + errorMessage + "</li>";
        }

        message += "</ul>";
        return message;
    }
}

And then modified the first block of code as follows:

var selectedTourDate = $("#tourDate").val();
var list = $("#bookedTourDate *");

var tmp = new Validator(function () {
    return list.filter(function () {
         return (this.innerHTML == selectedTourDate);
    }).length !== 0;
}, "Date already booked");

validationRunner.addValidation(tmp);
validationRunner.validate();
var msg = validationRunner.getErrorMessage();

This does not work at all.

It seems that the problem is that in this statement:

return (this.innerHTML == selectedTourDate);

The “this” is the Validator object instead of the html element from the list which confuses me since as its inside the function of the “filter” method it should be.

Is there a way to correct this so I can accomplish what I am trying to do here?

Answer 1

this does have the correct value but there are some mistakes in the getErrorMessage function.

To check the value of this don’t rely on a debugger’s “watch variable” function but do a console.log which will give you the value at a specific point of the code execution.

My changes:

    for (var errorMessage = 0; errorMessage < validationRunner.errorMessages.length; errorMessage++) {
        message += "<li>" + validationRunner.errorMessages[errorMessage] + "</li>";
    }

The errorMessage variable is only a index and not the actual error message. Also you used a “bigger than” instead of a “smaller than” sign.

Here’s a fiddle