Question

I have a JQuery validation files that look as follow:

$('#TextBoxRisultati2b').on('blur', function () {
    var $this = $('#TextBoxRisultati2b');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxRisultati6b').on('blur', function () {
    var $this = $('#TextBoxRisultati6b');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxRisultati10b').on('blur', function () {
    var $this = $('#TextBoxRisultati10b');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxRisultati14b').on('blur', function () {
    var $this = $('#TextBoxRisultati14b');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxRisultati18b').on('blur', function () {
    var $this = $('#TextBoxRisultati18b');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxRisultati22b').on('blur', function () {
    var $this = $('#TextBoxRisultati22b');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxRisultati4').on('blur', function () {
    var $this = $('#TextBoxRisultati4');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxRisultati8').on('blur', function () {
    var $this = $('#TextBoxRisultati8');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxRisultati12').on('blur', function () {
    var $this = $('#TextBoxRisultati12');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxRisultati16').on('blur', function () {
    var $this = $('#TextBoxRisultati16');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxRisultati20').on('blur', function () {
    var $this = $('#TextBoxRisultati20');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxRisultati24').on('blur', function () {
    var $this = $('#TextBoxRisultati24');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxObiettivi3').on('blur', function () {
    var $this = $('#TextBoxObiettivi3');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxObiettivi6').on('blur', function () {
    var $this = $('#TextBoxObiettivi6');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxObiettivi9').on('blur', function () {
    var $this = $('#TextBoxObiettivi9');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});
$('#TextBoxObiettivi12').on('blur', function () {
    var $this = $('#TextBoxObiettivi12');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxObiettivi15').on('blur', function () {
    var $this = $('#TextBoxObiettivi15');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

$('#TextBoxObiettivi18').on('blur', function () {
    var $this = $('#TextBoxObiettivi18');
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

The selection are all the same. The entire validation file is very verbose. Is there a way to optimize this code?

Answer 1

You can use an attribute starts-with selector:

$('[id^=TextBoxRisultati]').on('blur', function () {
    var $this = $(this); //Note that you can just use 'this' here
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

Better yet, delegate the event to a common ancestor element:

$('#someAncestor').on('blur', '[id^=TextBoxRisultati]', function () {
    var $this = $(this); //Note that you can just use 'this' here
    if ($this.val() == '' || $this.val() === undefined) $this.val('0');
});

By delegating the event handler higher up the DOM tree, you end up with only a single event handler instead of one for each element. This is much more efficient. It works because most DOM events bubble up the tree from the element on which they originate, so you can capture the event at an ancestor element. The on method checks to see if the element at which the event originated matches a selector, and runs the event handler if so.

---

Also note that val will (in your case) always return a string (never undefined) so you can remove the check for undefined. And since an empty string evaluates to false, you can replace the comparison with the empty string with a shorter boolean comparison.

So, you can reduce all of that big block of code in your question to just this:

$('#someAncestor').on('blur', '[id^=TextBoxRisultati]', function () {
    var $this = $(this);
    if (!$this.val()) $this.val('0');
});