Question

I need help with simplifying/making shorter of the following validation code.
Help would be greatly appreciated.
At the moment there’s too much text, my teacher said it could be done easier/cleaner…
I’m really stuck.

Thank you.

window.addEventListener('load',init,false);

function init(){
    var submit = document.getElementById("submit");
    var gender = document.getElementById("gender");
    var age = document.getElementById("age");
    var length = document.getElementById("length");
    var weight = document.getElementById("weight");
    var duration = document.getElementById("duration");
    var time = document.getElementById("time");

    submit.addEventListener('click', validation, false);
    gender.addEventListener('checked',validategender,false);
    age.addEventListener('blur', validateage, false);
    length.addEventListener('blur',validatelength,false);
    weight.addEventListener('blur',validateweight,false);
    duration.addEventListener('blur',validateduration,false);
    time.addEventListener('checked',validatetime,false);
}

function validategender(){
    var man = document.getElementById("man");
    var vrouw = document.getElementById("vrouw");
    var genderfout = document.getElementById("genderFout");
    if(man.checked != true && vrouw.checked !=true){
        genderfout.innerHTML = "Please choose a gender";
        return false;
    }else {
        genderfout.innerHTML = "";
    }return true;
}

function validateage() {
    var age = parseInt(document.getElementById("age").value, 10);
    var ageFout = document.getElementById("ageFout");
    if (isNaN(age) || age < 0 || age > 130) {
        ageFout.innerHTML = "Please enter a valid age";
        return false;
    } else {
        ageFout.innerHTML = "";
    }
    return true;
}

function validateweight() {
    var weight = parseInt(document.getElementById("weight").value, 10);
    var weightFout = document.getElementById("weightFout");
    if (isNaN(weight) || weight < 30 || weight > 200) {
        weightFout.innerHTML = "Please enter a valid weight";
        return false;
    } else {
        weightFout.innerHTML = "";
    }
    return true;
}

function validatelength() {
    var length = parseInt(document.getElementById("length").value, 10);
    var lengthFout = document.getElementById("lengthFout");
    if (isNaN(length) || length < 50 || length > 220) {
        lengthFout.innerHTML = "Please enter a valid length";
        return false;
    } else {
        lengthFout.innerHTML = "";
    }
    return true;
}

function validateduration() {
    var duration = parseInt(document.getElementById("duration").value, 10);
    var durationFout = document.getElementById("durationFout");
    if (isNaN(duration) || duration < 0) {
        durationFout.innerHTML = "Please enter a valid time-duration";
        return false;
    } else {
        durationFout.innerHTML = "";
    }
    return true;
}

function validatetime(){
    var minutes = document.getElementById("minutes");
    var hours = document.getElementById("hours");
    var timeFout = document.getElementById("timeFout");
    if(minuten.checked !=true && uur.checked !=true){
        timeFout.innerHTML = "choose a time unit!";
        return false;
    }else {
        timeFout.innerHTML = "";
    }
    return true;
}

function validation(e){
    var genderOk = validategender();
    var ageOk = validateage();
    var weightOk = validateweight();
    var lengthOk = validatelength();
    var durationOk = validateduration();
    var timeOk = validatetime();

    if (!genderOk || !ageOk || !weightOk || !lengthOk ||  !durationOk || !timeOk){
        e.preventDefault();
    }
}

Answer 1

if JQuery not allowed that leave another option

Regular expression

you can validate but needs a little reading