javascript onBlur not working, and how to connect javascript files

Question

I have two javascript files that I am using to validate an email address.

validate.js:

function checkEmail(userEmail) {

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

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

navigation.js EDIT:

$(document).ready(function() {

//ADDED IMPORTS
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 (checkEmail(sEmail)) {
            alert('Email is valid');
        }
        else {
            alert('Invalid Email Address');
            e.preventDefault();
        }
    });

...(more code follows but not relevant)

I am also using this jade template:

login.jade:

form(action="")
    key EMAIL
        input(type="text", name="username", id="usernamefield")
        p hello world
    br
    key PASSWORD
        input(type="text", name="password", id="passwordfield")
        p hello world

    br
    input(type="submit", name="loginButton", id="login-button", value="LOGIN")

My issue is that when I input something into my email field, I do not get an alert message in any case. Am I allowed to just have to separate javascript files and call the methods I defined in validate.js within navigation.js? I tried putting the validate.js code in navigation.js, but even then it did not work. I would like to keep the files separate. Am I missing something obvious? I want it so that once the user inputs the email, and leaves the field, a message should appear warning if the email is valid or not.

Your help is appreciated.

Answer 1

You are already sending the value of email into checkemail function. So in checkEmail function in validate.js remove email.value in second line of function checkEmail

function checkEmail(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 false;
    }
}

Answer 2

Is it the blur Event or the checkEmail the problem? try to put a alert() or console.log() just after your blur (and make sure to lose focus on your input). Seperate file shouldn't be a problem. And also have you check for errors in your console ?

Answer 3

JavaScript string has no " value " field

After

var sEmail = $('#username').val();

sEmail becomes a string .

You are passing this string to checkEmail method and try to get "value" from a string:

if(!emailFilter.test(email.value)) {//...}

Replace to

if (!emailFilter.test(email)) {//...}