An If statement that finds if a number field is left blank or has too many decimal places but ignores if only zeroes in decimal places

Question

I have this one line of code:

if ($val === "" || ($val.split(".")[1] || "").length > 2)

Thanks to some help from the good people here. But this line of code counts numbers over 2 decimal places even if the numbers are all zeroes.

The problem with this is people can add 2.00 which is fine but not 2.000 which is the same number. So I am looking to add one more || statement that allows people to add multiple zero decimal places.

The entire code is this:

$(document).ready(function() {
  $("#submitCalculation").click(function() {
    $(".checkLength").each(function() {
      $val = $(this).val();
      if ($val === "" || ($val.split(".")[1] || "").length > 2) {    
        $(this).popover({
          html: true, 
          placement: "bottom",  
          content: '<textarea class="popover-textarea"></textarea>',
          template: '<div class="popover"><div class="arrow"></div>'+
              '<div class="row"><div class="col-3 my-auto"><i class="fas fa-exclamation-triangle" id="invalid-input7">'+
              '</i></div><div class="popover-content col-9">Enter a value between 2 and 50 m with up to 2 decimal places.'+
              '</div></div>' 
        });
        $(this).popover("show");
        $(this).click( function() {
            $(this).popover("hide");
        });
      }
    })
  })
}) 

It checks a number input for validity, if the field is blank, a popover tells them and the script stops there. If the field has too many decimal places, the poppver tells them and the script stops there. But, the problem now lies with the fact that people can add multiple zero decimal places, the script doesn't stop, but the popover still pops up.

Looking forward to your help on this one, it's been troubling me a while.

Answer 1

Convert the number to a float before checking it, as this will discard trailing zeroes after the decimal point. Then use a regular expression to check for too many digits after the decimal. You can also use isNaN to check if it's not a number at all.

 $(document).ready(function() { $("#submitCalculation").click(function() { $(".checkLength").each(function() { const $val = $(this).val(); let valid = true; const valFloat = parseFloat($val); if (isNaN(valFloat)) { valid = false; } else if (/\\.\\d{3}/.test(valFloat.toString())) { valid = false; } if (!valid) { console.log("Invalid input"); } else { console.log("Valid input"); } }) }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="checkLength"> <button id="submitCalculation">Check</button>

Answer 2

This should do the job:

 console.log("my answer:","1.2345,0.0103,4.56,2.3400,123.22000,234" .split(",").map(val=>{ let m=val.match(/\\.\\d\\d(.*)/); return val+': '+!!(m&&m[1]>0) }) ); // the following is Barmar's method which gets it wrong in 4 cases: console.log("Barmar's answer:","1.2345,0.0103,4.56,2.3400,123.22000,234" .split(",").map(val=> val+': '+!!(val == "" || val.match(/\\.\\d{0,2}[1-9]+/))) );

In your script you would need to replace

$val = $(this).val(); 
if ($val === "" || ($val.split(".")[1] || "").length > 2) { ...

with

$val = $(this).val(); 
let m=$val.match(/\.\d\d(.*)/);
if (!!(m&&m[1]>0)) { ...