Structuring JavaScript: Writing a basic validator

Question

I'm trying to clean up my JavaScript code, so I can stop writing spaghetti code and have some more overall structure. I wanted to test my skills by writing a simple form validator. However, I got stuck already.

This is the code I have at the moment:

(function($, window, undefined) {
    var Form = function($el) {
        this.$el = $el;
        this.fields = {};

        this.prototype.validate = function() {
            this.getFields();    
        }

        this.prototype.getFields = function() {
            console.log("getting fields");
        }

        return {
            validate: this.validate
        }
    };

    window.Form = Form;
})(jQuery, window);


$(function() {

    var form = new Form('#form-newsletter');
    form.validate();

});

A couple of questions about this.

I wrapped the Form variable in a self-executing function, passing in three parameters. jQuery, window and undefined to make sure it's always undefined. I'm not going to lie, this is how I learnt to do it and I'm not 100% sure why I do it this way. Is this bad practice or could I improve on this somehow? I then expose the Form variable by attaching it to the window.

Inside the Form var, I set some properties (is that how we call them?) and I have a couple of methods. I expose only the validate method in the return statement. Is this okay?

And then the part where I got stuck. I want validate() to be like an initialize function, which has the task of validating the form. Validate should call the getFields function to parse the form fields and put them into the fields object. However, I can't seem to get that working. It doesn't work when I call this.getFields(), this.prototype.getFields() or Form.getFields. Is this because the this inside this function is a different this than the Form object (correct wording here?)?. Should I put something like this.self = this at the start of the Form function?

I'm also wondering if it's okay to attach those methods to the prototype. Is there a reason not to do this?

I'm trying to learn; most books I read about JavaScript focus on the basics: a Dog class which inherits from a Mammal class. However, they don't really help me out with stuff like this, as far as I can tell. Are there any books, tutorials, screencasts out there to help me understand these concepts better?

EDIT:

Say I want to group my scripts under a common namespace: I could do

var MyStuff = {};

MyStuff.Utilities = { // stuff };
MyStuff.Form = function() { // stuff };

However, if I want to put these into separate files, like mystuff-form.js, mystuff-utilities.js, how would I go about it? Where do I declare the namespace var var MyStuff = {}? And after I do that, I can just attach my Form and Utilities to that, right? I can hardly make a MyStuff.js file with just var MyStuff = {}; window.MyStuff = MyStuff in it, can I?

pimvdb · Accepted Answer · 2012-10-04 16:38:42Z

2

You're confusing the constructor and the objects you can create from it. The idea of prototype is that you set functions on the constructor's .prototype property, which are then accessible by every object you create through the constructor.

Inside the constructor, this refers to the object being created. In your case, you're setting stuff on such an object's prototype - but that property doesn't exist. To set properties on the constructor's .prototype, jQuery allows for a neat syntax using $.extend:

// extend constructor's prototype with functions

$.extend(Form.prototype, {
    validate: function() {
        this.getFields();    
    },

    getFields: function() {
        console.log("getting fields");
    }
});

Now, any object has a .validate() function available.

Moreover, you're returning a new object from the constructor. You don't need to; it will even destroy the inheritance/prototype idea.

Also - you code this.$el = $el, but in your case you're passing a selector string, so I guess you want $($el) to convert it to a jQuery set (and perhaps rename the argument as well).

Lastly, the anonymous function doesn't need all these arguments passed:

jQuery -> $ - this is useful if the page is in jQuery.noConflict() mode - you can access jQuery as $ inside your function.
window -> window - doesn't really serve a purpose. window is even read-only, so it won't change.
undefined - in modern browsers, this is read-only, so no need to pass it. In older browsers, it only causes a conflict if you a) don't pass it, and b) some script on your page changes undefined. It's not really important, but it doesn't hurt to pass it like you do, of course.

See http://jsfiddle.net/4UNAp/.

edited Oct 4, 2012 at 16:38

answered Oct 4, 2012 at 16:17

pimvdb

155k80 gold badges313 silver badges358 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joris Ooms Over a year ago

Thanks. This was very helpful and I think I understand now. I was indeed confusing different concepts. I updated my question with one more thing I want to know, but I'm accepting this answer as it helped me a lot.

pimvdb Over a year ago

@cabaret: You could code window.MyStuff = window.MyStuff || {}; at the top in both files. It will either set it to the existing property (if already defined, so effectively doing nothing), or to a new object.

Collectives™ on Stack Overflow

Structuring JavaScript: Writing a basic validator

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related