Unable to check multiple if else condition in JQuery

Question

I am trying to check some multiple conditions in JQuery but it doesn't return the desired result. whatever I input it always went to else condition.

$(function() {
  $('#installment').on("keydown keyup", check);
  function check() {
    var inst = Number($("#installment").val());
    if (inst === 2 || inst === 4 || inst === 6 || inst === 12) {
      return true;
    } else {
      $("#installment").val('');
      alert("you can not set wrong value");
      return false;
    }
  }
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<tr>
  <td>Number of Installment</td>
  <td><input type="text" name="installment" id="installment"></td>
</tr>

If entering 12 doesn’t work, that’s because when entering the digit 1 you clear the input. With this type of approach you’ll only be able to validate 1 char input, or inputs where you add the entire prefixes. Another note, val returns a string and you are strict checking. — Radu Diță
– Radu Diță, Commented Mar 28, 2019 at 7:15
@RaduDiță "val returns a string" - that's why it has Number() around it — fdomn-m
– fdomn-m, Commented Mar 28, 2019 at 7:17

Maheer Ali · Accepted Answer · 2019-03-28 07:35:35Z

1

The problem is in the keydown triggered before the value update. So if you enter '2'. The value will return '' And Number('') is 0 so it always go to else Just remove the keydown event only use keyup

$(function() {
  $('#installment').on("keyup", check);

  function check() {
    var inst = Number($("#installment").val());
    console.log(inst)
    if (inst === 2 || inst === 4 || inst === 6 || inst === 12) {
      return true;
    } else {
      $("#installment").val('');
      alert("you can not set wrong value");
      return false;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
  <td>Number of Installment</td>
  <td><input type="text" name="installment" id="installment"></td>
</tr>

As @Radu Diță mentioned in the comment that 12 can never be valid if 1 is not so to fix that you can use String.prototype.startsWith()

$(function() {
  $('#installment').on("keyup", check);
  function check() {
    var inst = Number($("#installment").val());
    console.log(inst)
    if (inst === 2 || inst === 4 || inst === 6 || '12'.startsWith(String(inst))) {
      return true;
    } else {
      $("#installment").val('');
      alert("you can not set wrong value");
      return false;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
  <td>Number of Installment</td>
  <td><input type="text" name="installment" id="installment"></td>
</tr>

edited Mar 28, 2019 at 7:35

answered Mar 28, 2019 at 7:15

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

fdomn-m Over a year ago

Or use input event to also pick up other input methods (just not keydown as detailed here)

Radu Diță Over a year ago

Key up will not solve the entire problem. 12 will never be validated as 1 is not valid.

Maheer Ali Over a year ago

@Radu Diță I have attempted to fix that problem. Please see the edit. Thanks for pointing out

fdomn-m Over a year ago

Not much else you can do without a major change to how this works, but OP needs to be aware that there needs to be a secondary validation to ensure 1 doesn't pass on in the process (but should have this anyway as javascript shouldn't be the only validation, it's a UI-nicety / first-catch only)

Sami Ahmed Siddiqui · Accepted Answer · 2019-03-28 07:29:27Z

Try this:

$(function() {
  $('#installment').on("keydown keyup", check);
  function check(event) {
    var inst = $(this).val();
    if (inst === "") {
        return;
    }
    if (inst == 2 || inst == 4 || inst == 6 || inst == 12) {
      return true;
    } else {
      $("#installment").val('');
      alert("you can not set wrong value");
      return false;
    }
  }
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<tr>
  <td>Number of Installment</td>
  <td><input type="text" name="installment" id="installment"></td>
</tr>

In this code if starts working but only for 2, 4 and 6. It will not work for 12 as the first input is 1 which you doesn't validate instead of validating the input in keydown and keyup try to use blur once user finish writing something then validation works as you you like to.

$(function() {
  $('#installment').on("blur", check);
  function check(event) {
    var inst = Number($(this).val());
    if (inst === 2 || inst === 4 || inst === 6 || inst === 12) {
      return true;
    } else {
      $("#installment").val('');
      alert("you can not set wrong value");
      return false;
    }
  }
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<tr>
  <td>Number of Installment</td>
  <td><input type="text" name="installment" id="installment"></td>
</tr>

Jack Bashford · Accepted Answer · 2019-03-28 07:32:44Z

0

The issue is that your keydown event fires before the value of the input is modified. Use keyup (or better yet, input) instead:

$(function() {
  $('#installment').on("input", check);

  function check() {
    var inst = parseInt($("#installment").val());
    if (inst == 2 || inst == 4 || inst == 6 || inst == 12) {
      return true;
    } else {
      $("#installment").val('');
      alert("you can not set wrong value");
      return false;
    }
  }
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<tr>
  <td>Number of Installment</td>
  <td><input type="text" name="installment" id="installment"></td>
</tr>

edited Mar 28, 2019 at 7:32

answered Mar 28, 2019 at 7:18

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

3 Comments

Jack Bashford Over a year ago

But required if 12 should be allowed as a valid answer @freedomn-m.

Jack Bashford Over a year ago

OK then @freedomn-m I'll remove that.

fdomn-m Over a year ago

TBH, in this case, I'm not sure what else can be done with OPs limit code (so I've removed my previous comments) - it would need to have a secondary validation to ensure 1 doesn't pass on in the process (but should have this anyway as javascript shouldn't be the only validation, it's a UI-nicety / first-catch only)

SAVe · Accepted Answer · 2019-03-28 07:36:04Z

0

$(function() {
    var val = $("#installment").val();
  $('#installment').on("keydown keyup",
  function () {
    var inst = Number($("#installment").val());
    if (inst === 2 || inst === 4 || inst === 6 || inst === 12) {
      alert("OK");
     return false;
    } else {
      $("#installment").val('');
      alert("you can not set wrong value");
      //return false;
    }
  });
});

answered Mar 28, 2019 at 7:36

SAVe

8126 silver badges22 bronze badges

Collectives™ on Stack Overflow

Unable to check multiple if else condition in JQuery

4 Answers 4

4 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related