Conditional validation on two input fields that depend on each other

Question

My code consists of two input fields and a submit button. The business rules require the following rules:

1. At least one field must be filled out. Both can be filled out but both cannot be blank.
2. If the first field is empty or 0, then the second field is required.
3. If the second field is empty or 0, then the first field is required.
4. The fields should not break if non-numeric values are input.
5. If a field is not 0 or empty, then their respective minimum amount rules apply.

I've implemented the jQuery to retrieve the minimum amounts from data-rule- in each field in the HTML. These values will ultimately be managed by a CMS. The same goes for the validation messages.

My code behaves exactly as I want it and passes my unit tests, but I am wondering if the code could be simplified. I see that the code where foo and bar are assigned is repeated throughout the script. I tried to move them to variables outside of the validator logic, but it affected functionality and no longer behaved as needed. My guess is that the variables aren't updated at the same times that the validator code is executed. So I'm not sure where else I could put these variables so that the code isn't repeated.

Is this possible?

$.validator.addMethod('groterdan', function(value, element, param) {
  return (value >= param);
});

/*
var rauwOorspronkelijkeBedrag = $.trim($('#oorspronkelijkeBedrag').val());
var oorspronkelijkeBedrag = rauwOorspronkelijkeBedrag.length > 0 ? parseInt(rauwOorspronkelijkeBedrag, 10) : 0;
var rauwAanvullendBedrag = $.trim($('#aanvullendBedrag').val());
var aanvullendBedrag = rauwAanvullendBedrag.length > 0 ? parseInt(rauwAanvullendBedrag, 10) : 0;
*/

$('#beleggingsForm').validate({
  rules: {
    oorspronkelijkeBedrag: {
      required: function(element) {
        var rauwAanvullendBedrag = $.trim($('#aanvullendBedrag').val());
        var aanvullendBedrag = rauwAanvullendBedrag.length > 0 ? parseInt(rauwAanvullendBedrag, 10) : 0;
        return aanvullendBedrag === 0;
      },
      groterdan: {
        param: $('#oorspronkelijkeBedrag').data('rule-groterdan'),
        depends: function(element) {
          var rauwOorspronkelijkeBedrag = $.trim($('#oorspronkelijkeBedrag').val());
          var oorspronkelijkeBedrag = rauwOorspronkelijkeBedrag.length > 0 ? parseInt(rauwOorspronkelijkeBedrag, 10) : 0;
          var rauwAanvullendBedrag = $.trim($('#aanvullendBedrag').val());
          var aanvullendBedrag = rauwAanvullendBedrag.length > 0 ? parseInt(rauwAanvullendBedrag, 10) : 0;
          return oorspronkelijkeBedrag !== 0 || aanvullendBedrag === 0;
        }
      }
    },
    aanvullendBedrag: {
      required: function(element) {
        var rauwOorspronkelijkeBedrag = $.trim($('#oorspronkelijkeBedrag').val());
        var oorspronkelijkeBedrag = rauwOorspronkelijkeBedrag.length > 0 ? parseInt(rauwOorspronkelijkeBedrag, 10) : 0;
        return oorspronkelijkeBedrag === 0;
      },
      groterdan: {
        param: $('#aanvullendBedrag').data('rule-groterdan'),
        depends: function(element) {
          var rauwOorspronkelijkeBedrag = $.trim($('#oorspronkelijkeBedrag').val());
          var oorspronkelijkeBedrag = rauwOorspronkelijkeBedrag.length > 0 ? parseInt(rauwOorspronkelijkeBedrag, 10) : 0;
          var rauwAanvullendBedrag = $.trim($('#aanvullendBedrag').val());
          var aanvullendBedrag = rauwAanvullendBedrag.length > 0 ? parseInt(rauwAanvullendBedrag, 10) : 0;
          return oorspronkelijkeBedrag === 0 || aanvullendBedrag !== 0;
        }
      }
    },
    submitHandler: function() {
      //Update(); /* function that contains ajax code for the actual functionality but is not relevant to this post. Using "return false" for demonstration purposes instead */
      return false;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form id="beleggingsForm">
  <input id="oorspronkelijkeBedrag" name="oorspronkelijkeBedrag" type="text" data-rule-groterdan="500" data-msg-groterdan="Oorspronkelijke bedrag moet >= 500 zijn" data-msg-required="Oorspronkelijke bedrag is verplicht" />
  <br/>
  <input id="aanvullendBedrag" name="aanvullendBedrag" type="text" data-rule-groterdan="50" data-msg-groterdan="Aanvullend bedrag moet >= 50 zijn" data-msg-required="Aanvullend bedrag is verplicht" />
  <br/>
  <input type="submit" />
</form>

Answer 1

Some suggestions

Use element instead of new Jquery element selection

Why not use the element parameter, it may be the input you are selecting via jquery anyway. One less hardcoded variable you should worry about.

Minimize code duplication

The depends,required functions are both similar. What happens if you add another rule? Now there would be 6 of the same functions. Either make the function reusable from everywhere or simplify the expression.

Reduce variable dependancies

depends and required are hard to outsource because you depends on variables for the selector and boolean expression for the return. Maybe put the variables as function parameters?

function simplified(element, otherelement) {
    // Your job
}

...
    depends: simplified(element, otherelement)

Flexible parameter/variable count

If you add more variables later, use the new spread operator ... or arguments to retrieve any number of arguments inside your function.

function simplified(element) {
    for (let argument in arguments){
        //.val(), measure length, etc.
    }
}

function simplified(element, ...args) {
    for (let argument in args){
        //.val(), measure length, etc.
    }
}

Try using let/const instead of var

Var brings no benefit in your case, and since we are in a modern ES6 age you might as well use const in your case, since you are not reassigning the variables.

These are some (not testet) suggestions that should hopefully give you some inspirations.

EDIT # 1

As @RoToRa correctly pointed out values are calculated multiple times the same way. This is what I came up with a first cleanup of the code. Please don't see this as a full solution but rather a proof of concept how you can actually minify/cleanup your code when you think about it. It's far from perfect and doesn't count in when you are depending on more than 2 different input fields.

$.validator.addMethod('groterdan', function(value, element, param) {
  return (value >= param);
});

/*
var rauwOorspronkelijkeBedrag = $.trim($('#oorspronkelijkeBedrag').val());
var oorspronkelijkeBedrag = rauwOorspronkelijkeBedrag.length > 0 ? parseInt(rauwOorspronkelijkeBedrag, 10) : 0;
var rauwAanvullendBedrag = $.trim($('#aanvullendBedrag').val());
var aanvullendBedrag = rauwAanvullendBedrag.length > 0 ? parseInt(rauwAanvullendBedrag, 10) : 0;
*/
  
const getValue = function(target){
    const value = $.trim($('#' + target).val())
    return value.length > 0 ? parseInt(value, 10) : 0
}

const dependsCheck = function(element){
  return getValue(element.id) === 0;
};

const requiredCheck = function(element) {
  const otherTarget = element.id === "oorspronkelijkeBedrag" ? "aanvullendBedrag" : "oorspronkelijkeBedrag";
  
  return getValue(otherTarget) === 0;
};

$('#beleggingsForm').validate({
  rules: {
    oorspronkelijkeBedrag: {
      required: requiredCheck,
      groterdan: {
        param: $(this).data('rule-groterdan'),
        depends: dependsCheck
      }
    },
    aanvullendBedrag: {
      required: requiredCheck,
      groterdan: {
        param: $(this).data('rule-groterdan'),
        depends: dependsCheck
      }
    },
    submitHandler: function() {
      //Update(); /* function that contains ajax code for the actual functionality but is not relevant to this post. Using "return false" for demonstration purposes instead */
      return false;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form id="beleggingsForm">
  <input id="oorspronkelijkeBedrag" name="oorspronkelijkeBedrag" type="text" data-rule-groterdan="500" data-msg-groterdan="Oorspronkelijke bedrag moet >= 500 zijn" data-msg-required="Oorspronkelijke bedrag is verplicht" />
  <br/>
  <input id="aanvullendBedrag" name="aanvullendBedrag" type="text" data-rule-groterdan="50" data-msg-groterdan="Aanvullend bedrag moet >= 50 zijn" data-msg-required="Aanvullend bedrag is verplicht" />
  <br/>
  <input type="submit" />
</form>

While adding this example i notice some more areas to improve:

Naming / language

I myself personally struggle with this regularly. One thing i got used to is writing all my code in english and not my native tongue. This gives you a good practice and other developers not familiar with your language can lookup more easily what you are actually doing in the code. Code is kind of documentation itself. When you can't read it, documentation is needed.

As an excercise for you... which two functions look similar and which two objects can be mapped together easily now?

Answer 2

First off, two questions:

1) Is it correct that you are handling an blank field the same as a field containing zero? It seems to contradict the requirements.

2) There are no requirements defined if both fields are filled, not even that they need to be numbers. Is that correct?

---

Repeated code

You have a lot of repeated code, especially:

var tempbar = $.trim($('#bar').val());
var bar = tempbar.length > 0 ? parseInt(tempbar, 10) : 0;

This belongs in a function:

function parseIntegerValue(selector) {
  var value = $.trim($(selector).val());
  return value.length > 0 ? parseInt(value, 10) : 0;
}

Also the second line can be simplified by using the unitary + operator which converts a string to a number and returns 0 for an empty string:

function parseIntegerValue(selector) {
  var value = $.trim($(selector).val());
  return +value;
}

---

Ignoring invalid numbers

You are ignoring the case of invalid numbers. parseInt returns NaN if the string doesn't contain valid number. And since NaN === 0 returns false, a field wont be compared to its minimum number, if the other filed contains an invalid number.

---

Depends function

In the depends function you are unnecessarily checking the current field. If the other field is not empty, then it doesn't matter what the current field contains.

So for foo it can be simplified to

 depends: function(element) {
      var tempbar = $.trim($('#bar').val());
      var bar = tempbar.length > 0 ? parseInt(tempbar, 10) : 0;
      return bar === 0;
    }