Including JavaScript file in another JavaScript file

Question

I have two JavaScript files I am using and I'd like to include one in another.

validate.js:

function validateEmail(userEmail) {
    var email = userEmail;
    var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if (emailFilter.test(email)) {
    //alert('Please provide a valid email address');
        email.focus;
        return true;
    }
    else {
        return false;
    }
}

navigation.js

$(document).ready(function() {
    var imported = document.createElement('script');
    imported.src = 'lib/validation.js';
    document.head.appendChild(imported);

    console.log("DOCUMENT IS READY!");

    var viewsWrapper = $("#views-wrapper");
    var loginButton = $("#login-button");
    var registerButton = $("#register-button");

    // Login Link
    // TODO: Unclear if needed
    $("ul li.login").click(function() {
        $.get('/login', function(data) {
            viewsWrapper.html(data);
        });
    });

    $('#usernamefield').blur(function() {
        var sEmail = $('#usernamefield').val();
        if ($.trim(sEmail).length == 0) {
            alert('Please enter valid email address');
            e.preventDefault();
        }
        if (validateEmail(sEmail)) {
            alert('Email is valid');
        }
        else {
            alert('Invalid Email Address');
            e.preventDefault();
        }
    });
});

(There is more code which is not relevant)

I've tried using solutions described on this page here

As shown above in navigate.js (commented area), but that is not working.
I am trying to call the validateEmail function which is located in validate.js from within navigation.js, but I can't seem to do that. None of the solutions I've seen have helped.

Any help is appreciated.

Answer 1

You can't include one JS file from another in any simple manner. But you can include both from the page that uses them. Since your validateEmail function looks to be global, the other function will simply reference it.

Alternately you can use one of the many module loaders that exist. I would suggest that you save that for later, until you can do this simpler problem. But tools like Require.js and its kin will allow one module to specify its dependencies upon another and handle the loading of the dependencies.

Or as @Jason suggested, you can also use a script combiner, which is commonly used to speed up sites by allowing you to develop with multiple files but deploy with single ones.

But really, first you need to work on the basics, and that involves learning how scripts are used on web pages and how they talk to one another.

Answer 2

What I would recommend is using one of the many JavaScript libraries such as YUI Compressor or Google Closure Compiler to combine all your javascript files into a single file. These libraries will also take care of minifying/compressing them as well.

Don't roll your own...