Question

The following code works:

$(".valClear").each(function () {
        if ($(this).val().indexOf(".png") == -1) {
            $(this).val('');
        }
    });

However this doesn’t (the value is removed even if it contains .png or .jpeg), what am I doing wrong?

$(".valClear").each(function () {
        if (($(this).val().indexOf(".png") == -1) || ($(this).val().indexOf(".jpeg") == -1)) {
            $(this).val('');
        }
    });

Answer 1

You’re doing an OR, seems like you want an AND, like this:

$(".valClear").each(function () {
    if (($(this).val().indexOf(".png") == -1) && ($(this).val().indexOf(".jpeg") == -1)) {
        $(this).val('');
    }
});

With your OR logic, the value will likely not have either one of them, and the other part will be true, you want an AND, meaning it has neither in the value.

You can also optimize it a bit, like this:

$(".valClear").each(function () {
  var val = $(this).val();
  if ((val.indexOf(".png") == -1) && (val.indexOf(".jpeg") == -1)) {
    $(this).val('');
  }
});

---

To stray quite a bit from the question, and towards your actual problem…I’d actually change up how you’re doing this, using an array of allowed extensions and $.inArray() to check it, like this:

var allowedExtensions = ["png", "jpeg", "bmp"];
$(".valClear").each(function () {
  if ($.inArray($(this).val().split('.').pop(), allowedExtensions) == -1) {
    $(this).val('');
  }
});

You can test it here. You can see from the format, this is much easier to expand to allow additional extensions later.