I am trying to validate a large contact form. When the user forgets a required input field then I populate the empty variable with default text.

My current solution uses nine if statements. Is there a better way to do it 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 = $("#pany").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);
}

I am trying to validate a large contact form. When the user forgets a required input field then I populate the empty variable with default text.

My current solution uses nine if statements. Is there a better way to do it 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 = $("#pany").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);
}

• javascript
• jquery
• performance
• optimization

• There is one extra else{//proceed to ajax} which is not bound to any if – brk Commented Sep 3, 2017 at 7:19
• it shouldn't matter if it is an html tag or not. I created it my own just to remember. – user7038047 Commented Sep 3, 2017 at 7:41
• I would also remend using english in your code for everything (variables, ments...), even if it is just your small hobby project (to get into the habit). If it is work related, then definitely use english, even if you and all your colleagues speak only greek. You never know who will e after you to maintain it. – Lope Commented Sep 3, 2017 at 10:49

3 Answers 3

You can create a dict containing the form fields and the strings displayed when they are missing and iterate over the list. Also, as another response indicated, move setting the missing error message to the end and only do it once; Further, the if/else for that isn't needed if you're going to do the same thing in each case. Write the 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);

I can see there is some duplication of the code example

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

This can be put only in the last. So over all you just need to build the content of missing variable.

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

Something like this...

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' could be an attribute on input elem used for missing msg.