jQuery Plugin for a Form

Question

jQuery plugin for a form. Looking for constructive criticism on my code. Thanks in advance!

// form.js
// splashinn 

var Form = function(options) {

    options = options || {};

    this.url = options.url;
    this.$fields = $(options.fields);
    this.$status = $(options.status);
    this.$submit = $(options.submit);
    this.$form = options.form || 'form';
    this.rFields = {
        required: /[^.*]/,
        nodigit: /^[^0-9]+$/,
        email: /^[a-z0-9._%-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i,
    };
    this.required = [
        this.rFields.nodigit,
        this.rFields.email,
        this.rFields.required,
        this.rFields.required
    ];
    this.errors = ['Please enter a valid name.', 'Please enter a valid email address.', 'You must enter a subject.', 'No message? But I wanted one :('];
}

Form.prototype.init = function init() {

    this.$submit.click($.proxy(function(e) {
        this.process(e);
    }, this));

};

Form.prototype.process = function process(e) {

    var filled = true;

    e.stopImmediatePropagation();
    e.preventDefault();

    this.$fields.each($.proxy(function(i, element) {

        var $element = $(element);

        if (!$element.val().match(this.required[i])) {

            $element.focus();
            this.update(this.errors[i], true);
            filled = false;
            return false;
        }
    }, this));

    filled && this.submit($(this.$form).serialize());
};

Form.prototype.update = function update(message, isError) {

    if (isError && this.$status.hasClass('error')) {

        this.$status.addClass('error')
            .text(message);

        setTimeout($.proxy(function() {
            this.$status.removeClass('shake');
        }, this), 500);
    } else {
        this.$status.fadeOut();

        setTimeout($.proxy(function() {
            this.$status.text(message)
                .fadeIn();

            if (isError) {
                this.$status.removeClass('shake')
                    .addClass('error');
            } else {
                this.$status.removeClass('error info')
                    .addClass('success');
            }
        }, this), 500);
    }
    return this;
};

Form.prototype.submit = function submit(data) {

    $.ajax({
        type: 'POST',
        url: this.url,
        data: data,
        success: $.proxy(function(msg) {
            this.$fields.fadeOut();
            this.$status
                .empty()
                .append('<h4 class="">Nice one! The form has been sent to the server...</h4>')

            $(this.$submit)
                .animate({
                left: '-=500px',
                opacity: 0,
            }, 300);
        }, this)
    });
};

Creating a new form:

var exampleForm = new Form({
    url: mailUrl,
    fields: 'form input, form textarea',
    status: '#status',
    submit: '#submit'
})

exampleForm.init()

Pass in:

• The url to send the form data too
• The form fields all encapsulated in one string seperated by commas in the correct order of validation rules.
• Selector string where you want the status message to go
• The submit selector. This element will actually submit the form

Answer 1

It's not necessary to name your methods as below. Someone may reference to it further.

Form.prototype.submit = function submit(data) {
...
}

You can just simply define it as follows

Form.prototype.submit = function (data) {
...
}

ES6 style ;)

Form.prototype.submit = (data) => {
...
}

Form.prototype.init looks as moot method. This is exact what constructor has to do.

I take into account that you are developing a plugin so you're going to reuse it. Right? Thus your CSS classes such as "error", "info", etc. have to be configurable as well as other stuff. Or at least add unique prefix to it.

Answer 2

Nice structure. The only thing I would do is allow this.errors to be an option to pass into the plugin so that you can have many types of error strings:

this.errors = options.errors || ['your defaults'];

Then you would have the ability to override the default error messages with a new pass in.

var exampleForm = new Form({
    url: mailUrl,
    fields: 'form input',
    status: '#status',
    submit: '#submit',
    errors: [
             'First Name Required', 
             'Last Name Required', 
             'E-mail Address Required' 
             ]
});