How to reduce the code of several if statements

Question

I am trying to verify a great contact form. When the user forgets the required input field, I fill the empty variable with the default text.

My current solution uses nine if . Is there a better way to do this with less code ?

html: <xehases class="" id="xehases"></xehases>

 var onoma = $("#fname").val(); var eponimo = $("#lname").val(); var email = $("#email").val(); var diefthinsi = $("#address").val(); var poli = $("#city").val(); var xora = $("#country").val(); var katigoriaDiafimisis = $("#AdCategory").val(); var plano = $("#plan").val(); var istoselida = $("#website").val(); var epixirisi = $("#company").val(); var minima = $("#message").val(); var missing = ' '; if (onoma === "") { missing += 'Όνομα '; $("xehases#xehases").html(missing); } else { $("xehases#xehases").html(missing); } if (eponimo === "") { missing += 'Επώνυμο '; $("xehases#xehases").html(missing); } else { $("xehases#xehases").html(missing); } if (email === "") { missing += 'email '; $("xehases#xehases").html(missing); } else { $("xehases#xehases").html(missing); } if (poli === "") { missing += 'Πόλη '; $("xehases#xehases").html(missing); } else { $("xehases#xehases").html(missing); } if (xora === "please choose a category") { missing += 'Χώρα '; $("xehases#xehases").html(missing); } else { $("xehases#xehases").html(missing); } if (plano === "") { missing += 'Πλάνο '; $("xehases#xehases").html(missing); } else { $("xehases#xehases").html(missing); } if (katigoriaDiafimisis === "") { missing += 'Κατηγορία Διαφήμισης '; $("xehases#xehases").html(missing); } else { $("xehases#xehases").html(missing); } if (epixirisi === "") { missing += 'Επιχείρηση '; $("xehases#xehases").html(missing); } else { $("xehases#xehases").html(missing); } if (minima === "") { missing += 'Μήνυμα '; $("xehases#xehases").html(missing); } else { $("xehases#xehases").html(missing); } 

Answer 1

You can create a dict containing the form fields and lines displayed when they are absent and iterate over the list. In addition, as another answer indicated, move the error message to the end and do it once; In addition, if / else is not required for this if you will do the same in each case. Write code similar to this:

 // key is form input, value is displayed in missing field message const fieldsDict = { "fname": "Όνομα", "lname": "eponimo", // ... }; let missing = ""; Object.keys(fieldsDict).forEach((field) => { if ($("#" + field).val() === "") { missing += fieldsDict[field] + " "; } }); $("xehases#xehases").html(missing); 

Answer 2

I see that there is an example of duplicate code example

  $("xehases#xehases").html(missing); 

This can only be placed in the last. So, above everything, you just need to create the contents of the variable missing .

  if(onoma === "") missing +='Όνομα '; if(eponimo === "") missing+='Επώνυμο '; if(email === "") missing+='email '; if(poli === "") missing+='Πόλη '; if(xora === ""){ missing+='Χώρα '; // and more $("xehases#xehases").html(missing); 

Answer 3

Something like that...

 var fields = ['fname', 'lname', 'email']; // ...and so on var errField = $('#xehases'); function submit(){ fields.forEach(function(field){ var domElem = $('#' + field); if (domElem.val() === '') { errField.html(errField.text() + ' ' + domElem.attr('err-msg')); } }); } 

'err-msg' may be an attribute on an input element used for missing msg.