app.js

function loginValidation() {
    var username = document.forms["loginform"]["username"];
    var pwd = document.forms["loginform"]["password"];
    var usrVerify = Validate(username, "empty");
    var pwdVerify = Validate(pwd, "empty");
    return (usrVerify && pwdVerify);
}

function editProfileValidation() {
    var name = document.forms["editprofile-form"]["your-name"];
    var phone = document.forms["editprofile-form"]["phone-number"];
    var nameVerify = Validate(name, "empty", 0, 20, "length");
    var phoneVerify = Validate(phone, "empty", 9, 12, "length");
    return (nameVerify && phoneVerify);
}

function Validate(inputArea, type1, min = 0, max = 0, type2 = null, type3 = null) {
    var error = GetErrorMessage(inputArea.value, type1, min, max);
    if(error === "") {
        if (type2 != null) {
            error = GetErrorMessage(inputArea.value, type2, min, max);
            console.log(type2 + "length");
        }
        if (error === "") {
            if (type3 != null) {
                error = GetErrorMessage(inputArea.value, type3, min, max);
            }
        }
    }
    if(error !== "" && inputArea.nextElementSibling === null) {
        var errorEl = document.createElement("p");
        errorEl.innerHTML = error;
        errorEl.className = "error";
        insertAfterElement(errorEl, inputArea);

        inputArea.addEventListener("blur", function() {
            var error = GetErrorMessage(inputArea.value, type1, min, max);
            if(error === "") {
                if (type2 != null) {
                    error = GetErrorMessage(inputArea.value, type2, min, max);
                }
                if (error === "") {
                    if (type3 != null) {
                        error = GetErrorMessage(inputArea.value, type3, min, max);
                    }
                }
            }
            if (error === ""){
                this.nextSibling.remove();
            }
        },true);
    }
    return (error === "");
}

function insertAfterElement(el, src) {
    src.parentNode.insertBefore(el, src.nextSibling);
}


function GetErrorMessage(textArea, type, min = 0, max = 0) {
    var validateText = "";
    switch(type) {
        case "empty" :
            if(isEmpty(textArea)) {
                validateText = "Fill in the field";
            }
            break;
        case "email" :
            if(!isEmail(textArea)) {
                validatedText = "Invalid Email Address";
            }
            break;
        case "number" :
            if(isNumber(textArea)){
                validateText = "Fill in with only number";
            }
            break;
        case "length" :
            if (!isLengthEqual(textArea,min,max)){
                validateText = "Character must be between " + min.toString() + " and " + max.toString() + " long";
            }
            break;
    }
    return validateText;
}

function isEmpty(textArea) {
    return (textArea.match(/^s+$/) || textArea == "");
}

function isNumber(textArea) {
    return (!isNaN(textArea));
}

function isLengthEqual(textArea, min, max){
    return (textArea.length >= min && textArea.length <= max);
}

function isEmail(textArea) {
    return (textArea.match(/^([a-zA-Z0-9])+([.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-]+)+/));
}