Question

I want a generic error handler for my forms

var errorsBox = function() {
    var $errorBox = $('#form-error');

    return {
        add: function(errors) {
            if ($errorBox.length === 0) {
                $errorBox = $('<div id="form-error"><ul></ul></div>').appendTo('form');
            };

            $errorBox.find('ul > li').remove();

            $.each(errors, function(i, error) {
                $errorBox.find('ul').append('<li>' + error + '</li>');
            });
        }
    };
};

You can play with it on JSbin.

I’m getting

errorsBox.add is not a function

I’m sure it’s really obvious, but I can’t seem to understand why this might not be working.

What have I done wrong?

Thanks!

Answer 1

You defined errorsBox to be a function. So, you’d call it likewise:

errorsBox().add(...)