CODEWITHSUNDEEP
javascriptjqueryperformanceoptimization
user7038047
user7038047

Reputation:

How to reduce code of multiple if statements

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 = $("#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);
}

Upvotes: 5

Views: 1528

Answers (3)

Emir Maljanovic
Emir Maljanovic

Reputation: 161

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.

Upvotes: 0

Jared Sohn
Jared Sohn

Reputation: 444

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);

Upvotes: 11

Devesh
Devesh

Reputation: 4550

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);

Upvotes: 1

Related Questions