How to combine two if statements into one?

Question

I know there is a much cleanlier way to write this than multiple if statements but when I try to combine them my validation stops working! This isn't good practice right? Or in this case is two different if statements okay?

My code:

function validateForm() {
    var success = true;
    var x = document.forms["contestForm"]["firstName"].value;

    if (x == null || x == "") {

        addClass($('#firstNamespan'), 'formError');
        removeClass($('.validationError'), 'is-hidden');
        success = false;
    } else {
        removeClass($('#firstNamespan'), 'formError');
        addClass($('.validationError'), 'is-hidden');
    }

    var x = document.forms["contestForm"]["lastName"].value;

    if (x == null || x == "") {
        addClass($('#lastNamespan'), 'formError');
        removeClass($('.validationError'), 'is-hidden');
        success = false;
    } else {
        removeClass($('#lastNamespan'), 'formError');        
    }
    return success;
}

My attempt to combine:

function validateForm() {
    var success = true;
    var x = document.forms["contestForm"]["firstName", "lastName"].value;

    if (x == null || x == "") {
        addClass($('#firstNamespan', '#lastNamespan'), 'formError');
        removeClass($('.validationError'), 'is-hidden');
        success = false;
    } else {
        removeClass($('#firstNamespan', '#lastNamespan'), 'formError');
    }
    return success;
}

So what am I doing wrong? I also will need to add a birthday and e-mail validation but I wanted to get this cleaned up first before it became a monster of if else statements! Sorry for the extra non-helpful information its making me write more because I have to much code. Please feel free to edit and delete this once its posted.

Answer 1

Combine them by functional programming:

function validateForm() {
    var x = document.forms["contestForm"]["firstName"].value;
    //calls the function checkObject with the object x and the id
    var success1 = checkObject(x, '#firstNamespan');
    //the result of success1 is either true or false.

    var x = document.forms["contestForm"]["lastName"].value;
    //calls the function checkObject with the object x and the id
    var success2 = checkObject(x, '#lastNamespan');
    //the result of success2 is either true or false.

    //returns true if both success1 and success2 are true, otherwise returns false.
    return success1 && success2;
}

function checkObject(x, id)
{
    if (x == null || x == "") {
        addClass($(id), 'formError');
        removeClass($('.validationError'), 'is-hidden');
        return false;
    } else {
        removeClass($(id), 'formError');        
        return true;
    }
}

---

Which could then be condensed into

function validateForm() {
    return checkObject($('form[name="frmSave"] #firstName').val(), '#firstNamespan') && checkObject($('form[name="frmSave"] #lastName').val(), '#lastNamespan');
}

function checkObject(x, id)
{
    if (x == null || x == "") {
        addClass($(id), 'formError');
        removeClass($('.validationError'), 'is-hidden');
        return false;
    } else {
        removeClass($(id), 'formError');        
        return true;
    }
}

---

Answer for N number of fields with your pattern of naming

function validateForm() {
    var itemsToValidate = ["#firstName", "#lastName", "#birthday", "#email"];
    var results = [];
    $.map( itemsToValidate, function( val, i ) {
        results.push(checkObject($('form[name="frmSave"] ' + val).val(), val + 'span'));
    });

    for(var i=0; i<results.length; i++)
    {
        if(results[i] == false)
            return false;
    }
    return true;
}

function checkObject(x, id)
{
    if (x == null || x == "") {
        addClass($(id), 'formError');
        removeClass($('.validationError'), 'is-hidden');
        return false;
    } else {
        removeClass($(id), 'formError');        
        return true;
    }
}

Note: I didn't validate any of the JavaScript above please call me out if i made a mistake. I just typed this up in notepad as i'm out the door at work

Answer 2

Break things up into functions and utilize an array to loop through the fields to validate.

function isValidField(fieldName) {
    var value = document.forms["contestForm"][fieldName].value;
    return !(value == null || value == "");
}

function displayFieldError(fieldName) {
    addClass($('#' + fieldName + 'span'), 'formError');
    removeClass($('.validationError'), 'is-hidden');
}

var fields = ['firstName', 'lastName'];
var isValidForm = true;

fields.map(function(fieldName) {
    if (!isValidField(fieldName)) {
        displayFieldError(fieldName);
        isValidForm = false;
    }
});

if (isValidForm) {
    // Form is correct, do something.
}

Answer 3

By giving them a seperate identifier like this

var x = document.forms["contestForm"]["firstName"].value;
var y = document.forms["contestForm"]["lastName"].value;

if ((x == null || x == "") && (y == null || y == "")) {

    addClass($('#firstNamespan'), 'formError');
    removeClass($('.validationError'), 'is-hidden');

    addClass($('#lastNamespan'), 'formError');
    removeClass($('.validationError'), 'is-hidden');
    success = false;

} else {
    removeClass($('#firstNamespan'), 'formError');
    addClass($('.validationError'), 'is-hidden');

    removeClass($('#lastNamespan'), 'formError');        
}

But you need to be more precise about, what would you do with just addClass ? That won't work. You need have a JS object before this method call.

I think, you want some element there before the addClass and removeClass . Or they need to be like this

$('#firstNamespan').removeClass('formError');

Like this, you need to change your code. So that the object comes first and then the method call.

Answer 4

Make it a function,

function validateForm(formName) {
  var x =  document.forms["contestForm"][formName].value;
  if (x == null || x == "") {
    addClass($('#' + formName + 'span'), 'formError');
    removeClass($('.validationError'), 'is-hidden');
    return false;
  }
  removeClass($('#' + formName + 'span'), 'formError');
  addClass($('.validationError'), 'is-hidden');
  return true;
}

then you can call it twice,

function validateForm() {
  var success = validateForm('firstName');
  if (success) {
    success = validateForm('lastName');
  }
  return success;
}

Answer 5

The two ifs are checking two different form elements, and showing and hiding two different validation error elements.

Combining them will not be just a code refactor but also change functionality.

The only thing they have in common are that they both use the same variable 'x'.