CODEWITHSUNDEEP
javascriptregexfilternumbers
Gbn
Gbn

Reputation: 73

Regex for even number only - Javascript

I have filter in order to only type numbers...Now i want it to only accept even numbers : like 2/4/6/8 but I also wish I could enter 12/32/52/etc... and therefore be able to type the 1*/3*/5*/etc... so I'm trying to filter only the last character to always have an even number...

Here is my code :

                    
  function setFilter(textbox, filter) {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
      textbox.addEventListener(event, function() {
        if (filter(this.value)) {
          this.oldValue = this.value;
          this.oldSelectionStart = this.selectionStart;
          this.oldSelectionEnd = this.selectionEnd;
        } else if (this.hasOwnProperty("oldValue")) {
          this.value = this.oldValue;
          this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
        } else {
          this.value = "";
        }
      });
    });
  }
  
  function updateInput(){
    //some code

    setFilter(document.getElementById("nbrpages"), function(value) {
        return /^-?\d*((0)|(2)|(4)|(6)|(8))$/.test(value);
     });

      // some code //
    
  }


                   
                        <input style="text-align: center; width: 50px; height: calc(1.5em + 0.75rem + 2px);" type="text" id="nbrpages" data-min="60" data-max="100" value="60" oninput="updateInput();"/>

Thanks in advance !

Upvotes: 0

Views: 102

Answers (2)

Peter Thoeny
Peter Thoeny

Reputation: 7616

Rather than making the user mad by deleting input I prefer to notify if something is wrong. Here is a jQuery example for letting the user know if the number is not even:

$('#nbrpages').on('input', function (e) {
  let val = $(this).val();
  if(val % 2) {
    $('#nbrpages').addClass('redBorder');
    $('#errmsg').show();
  } else {
    $('#nbrpages').removeClass('redBorder');
    $('#errmsg').hide();
  }
});
.redBorder {
  border: solid 1px red
}
#errmsg {
  display: none;
  padding: 0 5px;
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input style="text-align: center; width: 50px; height: calc(1.5em + 0.75rem + 2px);" type="text" id="nbrpages" data-min="60" data-max="100" value="60" /> <span id="errmsg">Only even numbers please</span>

Upvotes: 0

Tim Biegeleisen
Tim Biegeleisen

Reputation: 522346

Please make your life simple and just use the modulus here:

function updateInput() {
    // some code

    setFilter(document.getElementById("nbrpages"), function(value) {
        return value % 2 == 0;
    });

    // some code
}

I'm not an expert in your area of JavaScript, but regex is mainly useful for textual comparisons, not arithmetic ones. To check for divisibility by some number, the modulus (remainder) is much better suited than regex.

Upvotes: 2

Related Questions