HiveBrain v1.2.0
Get Started
← Back to all entries
debugjavascriptMinor

Is this a good way to store error messages to display back to the user?

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
thiserrortheuserwaystorebackmessagesgooddisplay

Problem

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'));
    }
});

Solution

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

Code Snippets

cosmo.error = function(id) {
    ...
};
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"));

Context

StackExchange Code Review Q#2387, answer score: 4

Revisions (0)

No revisions yet.