CODEWITHSUNDEEP
jqueryjquery-validate
Amanda Kitson
Amanda Kitson

Reputation: 5547

jquery validator addmethod dynamic message

I have a custom validation method I am using with the jquery validator. I am trying to get the error message to be dynamically generated.

I have googled, and the answer I've most seen is shown in this stackoverflow post.

However, when I try to implement it myself, it doesn't work. It simply ignores my updated message, and just displays the original message.

Here is my code, located inside the jquery.ready() function. What am I doing wrong?

Note: "g$" is our shorthand for jquery.

    var jsBlackoutDateMessage = "Tournaments cannot be scheduled on blackout dates.";
    var jsBlackoutDateMessageFunction = function () {
        return jsBlackoutDateMessage;
    };
    g$.validator.addMethod(
    "notBlackoutDate",
    function (value, element) {

        var notBlackoutDate = true;

        if (g$.inArray(value, jsBlackoutDates) != -1) {
            notBlackoutDate = false;
        }

        if (notBlackoutDate == false) {

            // year
            var year = new Date(g$.trim(g$('#txtDate').val())).getFullYear();

            var blackoutDatesForYear = jsBlackoutDates.filter(function (item) {
                return endsWith(item, year.toString());
            })[0];

            var blackoutDatesForYearMessage = [];
            blackoutDatesForYearMessage.push("Tournaments cannot be scheduled on blackout dates.");
            blackoutDatesForYearMessage.push("<ul>");

            g$.each(blackoutDatesForYear, function (key, value) {
                blackoutDatesForYearMessage.push("<li>");
                blackoutDatesForYearMessage.push(new Date(value).toLocaleDateString());
                blackoutDatesForYearMessage.push("</li>");
            });

            blackoutDatesForYearMessage.push("</ul>");

            jsBlackoutDateMessage = blackoutDatesForYearMessage.join("");
        }

        return this.optional(element) || notBlackoutDate;
    },
    jsBlackoutDateMessageFunction
);

Upvotes: 4

Views: 7440

Answers (1)

CHansen
CHansen

Reputation: 71

I would venture a guess that something to do with either the filter or that each function is not operating correctly. I tried boiling your code down to the simplest components and came up with this (which works correctly on my end):

var message = "Original Message";
var messageFunc = function () { return message; };

$.validator.addMethod("messageTest", function (value, element) {
        var newMessage = [];

        newMessage.push("Original Message");
        newMessage.push(" - Plus new message");

        message = newMessage.join("");

        // We will always return false, so that
        // the message always shows
        return this.optional(element) || false;
    }, messageFunc);

$("#testId").rules("add", { messageTest: true });

On your code, try replacing:

jsBlackoutDateMessage = blackoutDatesForYearMessage.join("");

with

$("#someDivID").html( blackoutDatesForYearMessage.join("") );

Where someDivID is a div that is visible on your form. This way you can use FireBug to inspect the actual HTML that is being written down. It may be that it contains the initial <ul></ul> tag, but since it's empty, it isn't visible. This would help you identify where the code is breaking.

Another note (and this is especially true with languages that you can't just toss a debugger on): generally it is a good idea to create a bare bones version of whatever you're coding first. This allows you to develop over iterations, and makes tracking down where your code is breaking significantly easier. Try the example code at the top of my post and see if you can get that functioning correctly.

Upvotes: 7

Related Questions