0

If-else code which I have written. I want to optimize it.
(Using maybe Collection).
Can someone show me how to do it?

  if(form.first_name.value == '' && form.last_name.value == '' && form.company.value == '' && form.email.value == '') {
     document.getElementById("fn").style.display = 'block';
     document.getElementById("ln").style.display = 'block';
     document.getElementById("cmp").style.display = 'block';
     document.getElementById("em").style.display = 'block';
     return false;
}
else if(form.first_name.value == '' && form.last_name.value == '' && form.company.value == ''){
     document.getElementById("fn").style.display = 'block';
     document.getElementById("ln").style.display = 'block';
     document.getElementById("cmp").style.display = 'block';
     return false;
}
else if(form.first_name.value == '' && form.last_name.value == '' && form.email.value == ''){
     document.getElementById("fn").style.display = 'block';
     document.getElementById("ln").style.display = 'block';
     document.getElementById("em").style.display = 'block';
     return false;
}
else if(form.first_name.value == '' && form.company.value == '' && form.email.value == ''){
     document.getElementById("fn").style.display = 'block';
     document.getElementById("cmp").style.display = 'block';
     document.getElementById("em").style.display = 'block';
     return false;
}
else if(form.last_name.value == '' && form.company.value == '' && form.email.value == ''){
     document.getElementById("ln").style.display = 'block';
     document.getElementById("cmp").style.display = 'block';
     document.getElementById("em").style.display = 'block';
     return false;
}
else if(form.first_name.value == '' && form.last_name.value == ''){
     document.getElementById("fn").style.display = 'block';
     document.getElementById("ln").style.display = 'block';
     return false;
}
else if(form.first_name.value == '' && form.company.value == ''){
     document.getElementById("fn").style.display = 'block';
     document.getElementById("cmp").style.display = 'block';
     return false;
} 
else if(form.first_name.value == '' && form.email.value == ''){
     document.getElementById("fn").style.display = 'block';
     document.getElementById("em").style.display = 'block';
     return false;
}
else if(form.last_name.value == '' && form.company.value == ''){
     document.getElementById("ln").style.display = 'block';
     document.getElementById("cmp").style.display = 'block';
     return false;
}
else if(form.last_name.value == '' && form.email.value == ''){
     document.getElementById("ln").style.display = 'block';
     document.getElementById("em").style.display = 'block';
     return false;
}
else if(form.company.value == '' && form.email.value == ''){
     document.getElementById("cmp").style.display = 'block';
     document.getElementById("em").style.display = 'block';
     return false;
}
else if(form.first_name.value == ''){
     document.getElementById("fn").style.display = 'block';
     return false;
}
else if(form.last_name.value == ''){
     document.getElementById("ln").style.display = 'block';
     return false;
}
else if(form.company.value == ''){
     document.getElementById("cmp").style.display = 'block';
     return false;
}
else if(form.email.value == ''){
     document.getElementById("em").style.display = 'block';
     return false;
}

1 Answer 1

1

Basically, you're testing all 16 permutations that can result in failure, but you only need four tests in total. Here's an (IE 9+) solution:

var fieldmap = { first_name: "fn", last_name: "ln", company: "cmp", email: "em" };
var emptyFields = Object.keys(fieldmap).filter(
    function(key) {
        return form[key].value == "";
    }
);
emptyFields.forEach(
    function(key) {
        document.getElementById(fieldmap[key]).style.display = "block";
    }
);
if(emptyFields.length) {
    return false;
}

You must log in to answer this question.