Ygthkb

I want to reformat and validate if a user has provided a valid Belgian enterprise number. Because the input can be all of the following examples:

• BE 0123.321.123


• BE0123.321.123


• BE0123 321 123


• 0123.321.123


• 123.321.123


• 123321123

I've written a function that validates and reformat the input to a 'display' version (BE 0123.123.123) and a 'code' version (123123123). This function looks like this.

formatAndValidateEnterpriseNumber = enterpriseNumber => {

    if(enterpriseNumber === undefined || !enterpriseNumber || (enterpriseNumber || '').length < 3) return { isValid: false, error: 'Please fill in your enterprise number' };



        //Remove space, dots, ...

        enterpriseNumber = enterpriseNumber.toUpperCase();

        enterpriseNumber = enterpriseNumber.replace(/[. ,:-]+/g, '');



        //Check for double country code

        const reDouble = /^[a-zA-Z]{4}/;

        if (reDouble.test(enterpriseNumber)) enterpriseNumber = enterpriseNumber.substring(2);



        if (enterpriseNumber.length < 9 || enterpriseNumber.length > 12) return { isValid: false, error: 'The length of the provided number is incorrect' };



        //Check country code

        const reBE = /^[a-zA-Z]{2}/;

        if (reBE.test(enterpriseNumber)) {

            //Check if country code = BE

            if (enterpriseNumber.slice(0, 2) !== 'BE') return { isValid: false, error: 'Please fill in a Belgian enterprise number' };

            // Remove country code

            else enterpriseNumber = enterpriseNumber.substring(2);

        }



        //Check if first digit is 0

        if (enterpriseNumber.length === 10 && enterpriseNumber.startsWith('0')) enterpriseNumber = enterpriseNumber.substring(1);



        //Check if enterpriseNumber is valid with modulo test

        if (parseInt(97 - (enterpriseNumber.slice(0, 7) % 97), 10) !== parseInt(enterpriseNumber.slice(7, 9), 10))

            return { isValid: false, error: 'The provided number is invalid'}



      return {

            isValid: true,

            enterpriseNumber: enterpriseNumber,

            displayEnterpriseNumber: `BE 0${enterpriseNumber.substring(0, 3)}.${enterpriseNumber.substring(3, 6)}.${enterpriseNumber.substring(6, 9)}`

      };

};

I think it's pretty messy and I'm wondering if this can be improved with one/two regex tests that reformat and validate the user's input?

A second question: Sometimes for account or credit cards numbers the input field had those underscores and lines (-) already in the input box and reformat the number while typing. What is this method called and can this be done for a specific thing like a Belgian enterprise number?

Yes you can:

^(?:BE)?s*?[0-1]?(d{3})[.s]*?(d{3})[.s]*?(d{3})$

This regex should do it!

This source (in Dutch) states what an enterprise number is for Belgium:

It has the country code: BE followed by a 0 or 1 and then followed by 9 digits.

https://regex101.com/r/4SRHxi/3

Explanation:

• 
  ^ and $: the string has to start and end with the given regex


• 
  (?:BE)?: look for a group with BE but ? means it matches zero or
  one times - ?: means find but don't capture


• 
  s*?: search for a space that matches zero or unlimited times in a lazy fashion, as few matches as possible.


• 
  [0-1]?: check if a zero of one is present zero or one times


• 
  (d{3}): Check if succeeded by three digits


• 
  [.s]*?: search for a space or dot that matches zero or unlimited times in a lazy fashion, as few matches as possible.


• 
  (d{3}): Check if succeeded by three digits


• 
  [.s]*?: again search for a space or dot that matches zero or unlimited times in a lazy fashion, as few matches as possible.


• 
  (d{3}): check for last three digits

This will check if the input validates.

Editing it into the code version is simple:

«code».replace(/^(?:BE)?s*?[0-1]?(d{3})[.s]*?(d{3})[.s]*?(d{3})$/g, "$1$2$3");

the g or global modifier will ensure all unwanted characters will be deleted. Here some magic happens. Since the three digits groups are surrounded by parenthesis the form a group. The (?:BE) does look for that group but doesn't capture it. We can put the groups back using the variables $1 to $3.

document.querySelector("pre").textContent.split("n").forEach(function(element){

  if (element.match(/^(?:BE)?s*?[0-1]?(d{3})[.s]*?(d{3})[.s]*?(d{3})$/))

  {

     console.log(element.replace(/^(?:BE)?s*?[0-1]?(d{3})[.s]*?(d{3})[.s]*?(d{3})$/g, "$1$2$3"));

  }

  else

  {

    console.log(`REJECTED: ${element}`);

  }



});

<pre>

BE 0123.321.123

BE0123.321.123

BE0123 321 123

BE 0123  321  123

BE 01 23 32 11 23

BE 0123 32 11 23

1123.321.123

123.321.123

123321123

</pre>

Rebuilding the String into the correct user friendly way is easy now:

document.querySelector("pre").textContent.split("n").forEach(function(element) {

  if (element.match(/^(?:BE)?s*?[0-1]?(d{3})[.s]*?(d{3})[.s]*?(d{3})$/)) {

    var stripped = element.replace(/^(?:BE)?s*?[0-1]?(d{3})[.s]*?(d{3})[.s]*?(d{3})$/g, "$1$2$3");



    //with the modulo check from your code added back in.

    if (97 - (parseInt(stripped.slice(0, 7), 10) % 97) == parseInt(stripped.slice(7, 9), 10)) {

      //use a literal string

      //use substring to put the dots between the sections of three numbers.

      var humanReadable = `BE 0${stripped.substring(0,3)}.${stripped.substring(3,6)}.${stripped.substring(6,9)}`;

      console.log(`CODE: ${stripped}`, `UI: ${humanReadable}`);

    }

  }



});

<pre>

BE 0123.321.123

BE0123.321.123

BE0123 321 123

0123.321.123

123.321.123

123321123

844256524

</pre>

Second Question
Yes, this can be done however it requires you to write your own code for it.

Simple version:

document.querySelector("div.enterprisenumber > input").addEventListener("keydown", function(e) {

  let value = this.value;



  //prevent the input from going back to 0

  if ( (value.length == 1 && (e.key == "Backspace" || e.key == "Delete"))) {

    e.preventDefault();

    return false;

  }

}, true);



document.querySelector("div.enterprisenumber > input").addEventListener("keyup", function(e) {

  //reset to a value without dots 

  let value = this.value.replace(/./g, "");



  //strip the leading zero

  const valueWithout = value.substring(1);

  //calculate how much iterations we need of a groups of three digits.

  const i = Math.floor(valueWithout.length / 3);

  let newValue = "0";

  //check if backspace or delete are used to make sure the dot can be deleted.

  if (valueWithout.length < 10 && !(e.key == "Backspace" || e.key == "Delete")) {

    //only fire when higher than zero

    if (i > 0) {

      let t;

      //t is the index

      for (t = 0; t < i; t++) {

      //slice the correct portion of the string and append a dot, unless we are at the end of the groups

        newValue += valueWithout.slice(t * 3, t * 3 + 3) + (t == 2  ? "" : ".");

      }

      //append the remainder that is not a group of three.

      newValue += valueWithout.slice((t) * 3);

    } else {

      //return the value as is.

      newValue = value;

    }

    //set the new value to the input.

    this.value = newValue;

  }

}, true);



document.querySelector("div.enterprisenumber > input").addEventListener("blur", function(e) {

  let passed = false;

  if (this.value.match(/^(?:BE)?s*?[0-1]?(d{3})[.s]*?(d{3})[.s]*?(d{3})$/))

  {

    const value = this.value.substring(1).replace(/./g, "");

    //with modulo check

    if (97 - (parseInt(value.slice(0,7), 10) % 97) == value.slice(7, 9))

    {

      passed = true;

    }

  }

  document.querySelector(".enterprisenumber").classList[(passed ? "remove" : "add")]("error");

});

* {

  box-sizing: border-box;

  font-family: tahoma;

  font-size: 10pt;

}



div.enterprisenumber {

  border: 1px solid #747474;

  width: 300px;

  padding: 0px;

  display: grid;

  grid-template-columns: 25px auto;

}



div.enterprisenumber.error {

  border: 1px solid #ff0000;

}



div.enterprisenumber>span {

  grid-column: 1;

  border: 0px;

  padding: 3px;

  background: linear-gradient(to right, rgba(0,0,0, 0.8) 33%, rgba(255,243,54, 0.8) 33%, rgba(255, 243, 54, 0.8) 66%, rgba(255, 15, 33, 0.8) 66%, rgba(255, 15, 33, 0.8) 100%);

  color: #ffffff;

  font-weight: bold;

  text-shadow: 1px 1px #000000;

}



div.enterprisenumber>input {

  grid-column: 2;

  border: 0px;

  padding: 3px;

}

Enter: 844256524

<div class="enterprisenumber">

  <span>BE</span><input value="0" maxlength="12" />

</div>

For your example strings, you could match:

^(?:BEs?)?[01]?(d{3}([. ])d{3}2d{3}|d{9})$

That will match

• 
  ^ Start of string


• 
  (?:BEs?)? Optional BE followed by optional whitespace char


• 
  [01]? Optional zero or 1


• 
  ( Capturing group
  
  
  
  
  • 
    d{3} Match 3 digits
  
  
  • 
    ([. ]) Capture in group either a space or digit to use as backreference
  
  
  • 
    d{3}2d{3} Match 3 digits, dot or space (2 is the backreference) and 3 digits
  
  
  • 
    | Or
  
  
  • 
    d{9} Match 9 digits
  
  
  
  


• 
  ) Close capturing group


• 
  $ End of string

Regex demo

And then in the replacement use the first capturing group and replace the space or the dot with an empty string.

let pattern = /^(?:BEs?)?[01]?(d{3}([. ])d{3}2d{3}|d{9})$/;

let strings = [

  "BE 0123.321.123",

  "BE0123.321.123",

  "BE0123 321 123",

  "0123.321.123",

  "123.321.123",

  "123321123",

];



strings = strings.map(x => x.replace(pattern, function(m, g) {

  let enterpriseNumber = g.replace(/[. ]/g, "");

  return `BE 0${enterpriseNumber.substring(0, 3)}.${enterpriseNumber.substring(3, 6)}.${enterpriseNumber.substring(6, 9)}`

}));



console.log(strings);

Here is an implementation of a BE ____.___.___ style of input. The pattern will be maintained, so the input will be guaranteed to have the "BE" prefix, the space, and the two dots. The validation can then concentrate on completeness and the modulo test.

Note that the input requires the first group to have 4 digits, where the first digit must be a 0 or a 1.

const ent = document.getElementById("ent");

const out = document.getElementById("isvalid");



function format() {

    const re = /^D*[2-9]+|D+/g;

    const [i, j] = [this.selectionStart, this.selectionEnd].map(i => {

        i = this.value.slice(0, i).replace(re, "").length;

        return i + 3 + (i >= 4 + format.backspace) + (i >= 7 + format.backspace);

    });

    this.value = "BE " + this.value.replace(re, "").padEnd(10, "_")

                                   .replace(/(....)(...)(...).*/, "$1.$2.$3");

    this.setSelectionRange(i, j);

    format.backspace = false;

    out.textContent = validate(this.value) ? "is valid" : "is invalid";

}



function validate(num) {

    return /^BE [01](d{3}.){2}d{3}$/.test(num) 

            && 97 - num.replace(/D/g, "").slice(0, 8) % 97 === +num.slice(-2);

}



ent.addEventListener("input", format);

ent.addEventListener("keydown", (e) => format.backspace = e.key == "Backspace");

Belgian enterprise number: <input id="ent" value="BE ____.___.___">

<span id="isvalid"></span>