Validating email without Regex

Question

I'm trying to improve my JavaScript (I'm usually a copy/paste guy but can do basic DOM stuff with jQuery too), so I decided to try and make a function to validate an email address without using Regex.

The code seems to work, but I'm interested in hearing how it could be improved.

I'll include the code below, but you can run/fork it on Codepen.

HTML

<input id="email" type="text">
<input id="submit" type="submit" value="Validate">

JS

// Function: valid email address without regex
function isvalidemail(email) {

    // Get email parts
    var emailParts = email.split('@');

    // There must be exactly 2 parts
    if(emailParts.length !== 2) {
        alert("Wrong number of @ signs");
        return false;   
    }

    // Name the parts
    var emailName = emailParts[0];
    var emailDomain = emailParts[1];

    // === Validate the parts === \\

    // Must be at least one char before @ and 3 chars after
    if(emailName.length < 1 || emailDomain.length < 3) {
        alert("Wrong number of characters before or after @ sign");
        return false;
    }

    // Define valid chars
    var validChars = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','.','0','1','2','3','4','5','6','7','8','9','_','-'];

    // emailName must only include valid chars
    for(var i = 0; i < emailName.length; i += 1) {
        if(validChars.indexOf(emailName.charAt(i)) < 0 ) {
            alert("Invalid character in name section");
            return false;   
        }
    }
    // emailDomain must only include valid chars
    for(var j = 0; j < emailDomain.length; j += 1) {
        if(validChars.indexOf(emailDomain.charAt(j)) < 0) {
            alert("Invalid character in domain section");
            return false;   
        }
    }

    // Domain must include but not start with .
    if(emailDomain.indexOf('.') <= 0) {
        alert("Domain must include but not start with .");
        return false;
    }

    // Domain's last . should be 2 chars or more from the end
    var emailDomainParts = emailDomain.split('.');
    if(emailDomainParts[emailDomainParts.length - 1].length < 2) {
        alert("Domain's last . should be 2 chars or more from the end");
        return false;   
    }

    alert("Email address seems valid");
    return true;
}

document.getElementById('submit').onclick = function() {
    var email = document.getElementById('email').value;
    isvalidemail(email);
};

One thing I know could be improved is where I repeat basically the same code twice to validate the characters in each section. I am more interested in hearing if the way I've structured the function and sections could be done better, as the exercise for me was more about writing well-structured JavaScript and getting familiar with some of the built-in functions than about writing a perfect validator (which is also the reason I didn't use Regex).

Answer 1

Read the (email address: syntax) article on Wikipedia for what is allowed. Your current validation will produce a lot of fails for valid email addresses.

Answer 2

Right off the bat, there's too much explicit nit-picking going on for email validation without using a Regex... but since you're practicing javascript, here's a few tips:

1. Since this function requires a parameter passed, you always want to make sure one exists before operating on it (i.e. using the split method).
2. camelCase your method names for improved readability
3. Declaring your variables on the top improves readability
4. Optional but suggested: optimize your code for performance (i.e. research best patterns for for-loops, etc.)

You can look up great references from Douglas Crockford on some Do's and Don'ts of Javascript to also improve your skills. Those were helpful to review in the early days. YouTube will have many of his lectures for review.

Also, I agree with Gaby -- emails do accept so many valid characters, including ones we've never thought would be acceptable.

Lastly, here's code that I quickly modified for yours. I'm sure there's a few more things you can do to improve the quality. A regex could obviously replace this entire function with roughly 5 lines of code if you're not picky.

// Function: valid email address without regex
function isValidEmail(email) {
    // If no email or wrong value gets passed in (or nothing is passed in), immediately return false.
    if(typeof email === 'undefined') return null;
    if(typeof email !== 'string' || email.indexOf('@') === -1) return false;

    // Get email parts
    var emailParts = email.split('@'),
        emailName = emailParts[0],
        emailDomain = emailParts[1],
        emailDomainParts = emailDomain.split('.'),
        validChars = 'abcdefghijklmnopqrstuvwxyz.0123456789_-';

    // There must be exactly 2 parts
    if(emailParts.length !== 2) {
        alert("Wrong number of @ signs");
        return false;
    }

    // Must be at least one char before @ and 3 chars after
    if(emailName.length < 1 || emailDomain.length < 3) {
        alert("Wrong number of characters before or after @ sign");
        return false;
    }

    // Domain must include but not start with .
    if(emailDomain.indexOf('.') <= 0) {
        alert("Domain must include but not start with .");
        return false;
    }

    // emailName must only include valid chars
    for (var i = emailName.length - 1; i >= 0; i--) {
        if(validChars.indexOf(emailName[i]) < 0) {
            alert("Invalid character in name section");
            return false;
        }
    };

    // emailDomain must only include valid chars
    for (var i = emailDomain.length - 1; i >= 0; i--) {
        if(validChars.indexOf(emailDomain[i]) < 0) {
            alert("Invalid character in domain section");
            return false;
        }
    };

    // Domain's last . should be 2 chars or more from the end
    if(emailDomainParts[emailDomainParts.length - 1].length < 2) {
        alert("Domain's last . should be 2 chars or more from the end");
        return false;   
    }

    alert("Email address seems valid");
    return true;
}