0

I have a set of list with checkboxes, when I click 5 checkboxes an alert message to be displayed congrates you have selected 5 options. I have to do the validation using promise. If I am not using reject, it is working fine. But if I add the code as given below, 'reject' code is executed and displaying error as 'undefined'. Where have I gone wrong?

let clickvalidation = new Promise(function(resolve, reject) {
  $('input[type=checkbox][id=chk1]').change(function() {
    if ($(this).is(':checked')) {
      noOfClick++;
      if (noOfClick == 5) {
        resolve();
      } else {
        reject();
      }
    }
  });
});

clickvalidation
  .then(function() {
    console.log('Success, You are a GEEK');
    alert(`Congrats 5 tasks have been successfully completed`);

  })
  .catch(function(e) {
    console.log(e.stack);
  });
VLAZ
  • 26,331
  • 9
  • 49
  • 67
Elizabeth
  • 35
  • 1
  • 7
  • 2
    `reject()` will reject with no error. Use something like `reject(new Error('Must select 5 tasks'))` or something of that nature – apokryfos Feb 13 '22 at 10:01
  • 1
    "*I have to do the validation using promise*" why? Is this [an XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem)? – VLAZ Feb 13 '22 at 10:02
  • it is going to 'reject' not 'resolve' why? if i omit else reject function, resolve code is executed? – Elizabeth Feb 13 '22 at 10:12

1 Answers1

3

A promise can only resolve once.

The first time you change the checkbox, you call reject() and you don't pass it any arguments (so it errors with an undefined message).

Any subsequent time you change the checkbox, you call reject or resolve but the promise is no longer pending.

Promises are a good tool to tell you when you have a result. They aren't designed to provide multiple results.

This isn't a situation where promises are a useful tool. Just use a regular event handler by itself.

let counter = 0;

document.querySelector('input').addEventListener('change', () => {
  counter += 1;
});

document.querySelector('button').addEventListener('click', () => {
  if (counter === 5) {
    console.log("OK");
  } else {
    console.log("Not OK");
  }
});
<input type="checkbox"><button>OK</button>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • so if i write only resolve(), then resolve() is executed. but if i write else {reject()} then it will execute reject() function only – Elizabeth Feb 13 '22 at 10:14
  • 1
    If you change the checkbox five times it will call `reject` four times and then `resolve` once. The first time it calls `reject` it will settle the promise. The subsequent attempts to settle the promise won't work because it is already settled. – Quentin Feb 13 '22 at 10:17
  • actually this is my school assignment, and i have to do validation using promise. otherwise i am getting the output. – Elizabeth Feb 13 '22 at 10:21
  • 1
    I don't know the specific requirements for your assignment, but you're attempting to put a square peg in a round hole. Ask whomever gave you the assignment for help — they know what you are supposed to have learned (i.e. what tools you should be using for this), they know what the actual requirements of the assignment are, they can help you better than Stackoverflow can and it is their job to do so. – Quentin Feb 13 '22 at 10:25