5
\$\begingroup\$

I use the following code to put all of my error messages for the application in one javascript variable. Is this efficient way to store my error messages?

var cosmoBase = {
    messages: {
        empty: "Please enter ",
        numeric: "Please enter a valid number for ",
        date: "Please enter a valid date for "
    }
};
//Error messages
var cosmo = {
    messages: {
        lastName: {
            empty: cosmoBase.messages.empty + "Last Name"
        },
        dob: {
            empty: cosmoBase.messages.empty + "Date of Birth",
            invalid: cosmoBase.messages.date + "Date of Birth"
        },
        ssn: {
            empty: cosmoBase.messages.empty + "SSN",
            invalid: cosmoBase.messages.numeric + "SSN"
        },
        studentId :{
            empty: cosmoBase.messages.empty + "Student ID",
            invalid: cosmoBase.messages.numeric + "Student ID"
        }
    }
};

MORE INFO

The code above is stored in a js file

I am referencing the error messages like this :

var validator = $("form:first").validate({
    errorClass: 'Input_State_Error',
    rules: {
        lastName: {
            required: true
        },
        dob: {
            required: true,
            date: true,
            minlength: 10
        },
        ssn: {
            required: true,
            minlength: 4
        },
        studentId: {
            required: true
        }
    },
    messages: {
        lastName: cosmo.messages.lastName.empty,
        dob: {
            required: cosmo.messages.dob.empty,
            date: cosmo.messages.dob.invalid
        },
        ssn: cosmo.messages.ssn.empty,
        studentId: cosmo.messages.studentId.empty
    },
    errorPlacement: function(error, element) {
        error.appendTo($('#msg'));
    }
});
\$\endgroup\$
3
\$\begingroup\$

I would recommend you use a factory instead.

cosmo.error = function(id) {
    ...
};

then just use cosmo.error("ssn-empty")

Having your logic in a factory rather then an object gives you more control and makes your code significantly more DRY.

Implementation of error:

var error = (function() {
    var base = {
        empty: "Please enter ",
        numeric: "Please enter a valid number for ",
        date: "Please enter a valid date for ",
        ssn: "SSN",
        lastName: "Last Name",
        dob: "Date of Birth",
        studentId: "Student ID"
    };

    var methods = {
        "ssn": function(id) {
            if (id === "invalid") {
                return base.numeric + base.ssn;
            }
        },
        "dob": function(id) {
            if (id === "invalid") {
                return base.date + base.dob;
            }
        },
        "studentId": function(id) {
            if (id === "invalid") {
                return base.numeric + base.studentId;
            }
        },
    };

    return function(id) {
        var parts = id.split("-");
        if (parts[1] === "empty") {
            return base.empty + base[parts[0]];
        } else {
            return methods[parts[0]](parts[1]);
        }
    }
}());

console.log(error("ssn-invalid"));

live example

\$\endgroup\$
  • \$\begingroup\$ Does cosmo.error replace both variables or just var cosmo = { ? \$\endgroup\$ – guanome May 12 '11 at 16:34
1
\$\begingroup\$

I see you're using

errorPlacement: function(error, element) {
    error.appendTo($('#msg'));
}

If you make something in JS store your error log, you can do some really cool things.

For instance, I use this quick thing to log my errors out to a div...

var logLine = function(comment, element) {
    this.count = this.count + 1 || 0;
    element = element || $("");
    comment = comment || "undescribed event";
    $("pre.log").append(this.count + " - " +comment + "\n");
}

But something I'm about to do is take my plan of going this.count, and making a spot to store all my error objects.

So for instance,

var logLine = function(comment) {
    this.count    = this.count + 1 || 0;
    this.errorLog = this.errorLog  || [];
    comment       = comment        || "undescribed event";

    var logEntry       = {}
        logEntry.id    = this.count;
        logEntry.error = this.comment;
        logEntry.time  = new Date().getTime();
        //Anything else you want from https://developer.mozilla.org/en/DOM/window.navigator

    this.errorLog.push(logEntry)
}

This makes my error storing more portable, and more powerful. The real advantage in my mind here is I could create an event that sends ajax details about all my errors to my server.

Design knowing that your error code needs to have the object global somewhere for this.count to preserve state, unless you make this a special plugin to some framework or something.

This is really storing your errors after they occur, not how to store a template of them.

\$\endgroup\$
  • \$\begingroup\$ That sounds pretty interesting, but this is for feedback to the user. \$\endgroup\$ – guanome May 12 '11 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.