How to validate simple arithmetic calculation in JS for webpage?

Question

I want to check total price and receiving price of user input which receiving price shouldn't be more than total price.

say example, in html file, I do have 3 input box. box A getting value of total price, box B getting value of receiving payment through card and box C getting value of receiving payment by cash. box B + box C should not greater than box A. I need to validate it and stop submitting it.

if A >= B+C : allowing to submit the form

if A < B+C : Should not allow to submit form, need to show error message like "Receiving value is more than Total Value"

It may very simple, since I am new to JS I posting it here.

so...what problem are you facing?

Manav
– Manav

2022-06-19 07:29:41 +00:00
Commented Jun 19, 2022 at 7:29 — Manav
– Manav, Commented Jun 19, 2022 at 7:29

jsN00b · Accepted Answer · 2022-06-20 02:41:29Z

1

Presented below is one possible way to achieve the desired objective.

Code Snippet

// access the button from the html
const btn = document.getElementById("btnSubmit");

// access input boxes A, B, C
const [boxA, boxB, boxC] = [
  document.getElementById("boxA"),
  document.getElementById("boxB"),
  document.getElementById("boxC"),
];

// a generic method to validate if prices indicate
// that 'submit' button should be disabled
// as well as render an error notification
const validatePrices = () => {
  btn.disabled = (
    +boxA.value < +boxB.value + +boxC.value
  );
  document.getElementById("error").innerText = (
    +boxA.value < +boxB.value + +boxC.value
    ? 'Sum of Card Payment and Cash Payment exceeds Total Cost'
    : ''
  );
};

// add event-listener to each input to invoke the validate method
[boxA, boxB, boxC].forEach(
  box => box.addEventListener('keyup', validatePrices)
);

// a placeholder 'click' action handler for the 'submit' button
btn.addEventListener(
  'click', () => alert(
    `
      Valid prices received !
      Cost: ${boxA.value}
      Card payment: ${boxB.value}
      Cash payment: ${boxC.value}
    `
  )
);

.error-text {
  font-size: 14px;
  color: red;
  margin-top: 15px;
 }

<label for="boxA">Total Cost: </label><input id="boxA" type="number"/><br/>
<label for="boxB">Card Payment: </label><input id="boxB" type="number"/><br/>
<label for="boxC">Cash Payment: </label><input id="boxC" type="number"/><br/>
<div id="error" class='error-text'></div><br/><br/>
<button id="btnSubmit">Submit</button>

Explanation

Inline comments added to the snippet above.

edited Jun 20, 2022 at 2:41

answered Jun 19, 2022 at 8:04

jsN00b

3,7032 gold badges10 silver badges22 bronze badges

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

2 Comments

Saravanan Ragavan Over a year ago

Its working fine as I export; thanks a ton. how to add validation note when submit button disabled. otherwise user may not understand why button disabled. if we shows label as "Total Amount is less than Receiving Amount."

jsN00b Over a year ago

@SaravananRagavan - update the snippet to show error message when card payment + cash payment is above total cost. It is in the same method where we disable the submit method: validatePrices.

Collectives™ on Stack Overflow

How to validate simple arithmetic calculation in JS for webpage?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related