[HELP] Textfield phone validation on focusout with calculated value possible?

[Wollewolf42]

Environment

Please provide as many details as you can:

• Hosting type
  • [x] Form.io
  • [ ] Local deployment
    • Version:
• Formio.js version: 4.13.3
• Frontend framework: React
• Browser: Firefox
• Browser version:

Steps to Reproduce

1. Create Textfield called Phone
2. Insert validation js and calculated value js
3. Type 49234383838
4. Input will validated and auto-formatted to: +49 234 383838
5. try to change the first digits

Expected behavior

1. Expected user can change digits
2. Expected number will be revalidated after focus lost

Observed behavior

1. User can only change single values in the beginning
2. Cursor jumps to right befor finishing change

I only see the possible options of On Change and On Blur. Is it possible to make it like on focusout with Form Io? Like: https://javascript.info/focus-blur The Form Io Documentations says: Validation action This action is in development. It will trigger custom validation on the field. I also posted on Stackoverflow, but may here is the best way: https://stackoverflow.com/questions/74053416/form-io-phone-custom-validation-on-focusout-with-custom-calculated-value

Calculated value:

value = value.replace(/^0+/, "");

value = value
    .replaceAll(" ", "")
    .replaceAll("(", "")
    .replaceAll(")", "")
    .replaceAll("/", "")
    .replaceAll("-", "")
    .replaceAll(".", "")
    .replaceAll(",", "")
    .replaceAll("?", "")
    .replaceAll("*", "");

  var vorwahlen = [1,7,20,27,30,31,32,33,34,36,39,40,41,43,44,45,46,47,48,49,51,52,53,54,55,56,57,58,60,61,62,63,64,65,66,81,82,84,86,90,91,92,93,94,95,98,211,212,213,216,218,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,248,249,250,251,252,253,254,255,256,257,258,260,261,263,264,265,266,267,268,269,291,351,352,353,354,355,356,357,358,359,370,371,372,373,374,375,376,377,378,379,380,381,382,383,385,386,387,389,420,421,423,501,502,503,504,505,506,507,509,591,592,593,595,597,598,670,673,674,675,676,677,678,679,680,682,683,685,686,688,691,692,850,855,856,880,960,961,962,963,964,965,966,967,968,971,972,973,974,975,976,977,992,993,994,995,996,998,1242,1246,1268,1473,1758,1767,1784,1809,1829,1849,1868,1869,1876,3906];

let lastCodeDigit = 0;
if(value.length > 0) {
    if(value.charAt(0)=='+') {

        value = '+' + (value.substring(1, value.length)).replace(/[^0-9]/g, '');
        for(let i = 2; i < 6; i++){
            for (let j = vorwahlen.length-1; j >= 0; j--) {
                if(value.substring(1,i) == vorwahlen[j]){
                   lastCodeDigit = i; 
                    
                }
            }
        }
        value = value.substring(0, lastCodeDigit) +
            ' ' +
            value.substring(lastCodeDigit, lastCodeDigit+3) +
            ' ' +
            value.substring(lastCodeDigit+3, value.length);
    } else {
        value = value.replace(/[^0-9]/g, '');
        if(value.charAt(0)== '0'){
            if(value.charAt(1)=='0'){
                value = '+' + value.substring(2, value.length);
                value = value.substring(0, 3) +
                    ' ' +
                    value.substring(3, 6) +
                    ' ' +
                    value.substring(6, value.length);
            }
        } else{
            value = '+' + value;
        }
    }
}

Custom validation:

if (input === "") {
  valid = "Geben Sie Ihre Telefonnummer an";
} else {

  // regular expressions needed for validation
  const tooShortRegEx = /^.{0,3}$/;
  const tooLongRegEx = /^.{0,18}$/;
  const countryCode = /^0/;
  const laenderCode = /^[+]/;
  //const validRegEx = /^(?:([+][0-9]{1,2})+[.-]*)?([(]{1}[0-9]{1,6}[)])?([0-9 .-/]{3,20})((x|ext|extention)[]?[0-9]{1,4})?$/;

  var vorwahlen = [1,7,20,27,30,31,32,33,34,36,39,40,41,43,44,45,46,47,48,49,51,52,53,54,55,56,57,58,60,61,62,63,64,65,66,81,82,84,86,90,91,92,93,94,95,98,211,212,213,216,218,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,248,249,250,251,252,253,254,255,256,257,258,260,261,263,264,265,266,267,268,269,291,351,352,353,354,355,356,357,358,359,370,371,372,373,374,375,376,377,378,379,380,381,382,383,385,386,387,389,420,421,423,501,502,503,504,505,506,507,509,591,592,593,595,597,598,670,673,674,675,676,677,678,679,680,682,683,685,686,688,691,692,850,855,856,880,960,961,962,963,964,965,966,967,968,971,972,973,974,975,976,977,992,993,994,995,996,998,1242,1246,1268,1473,1758,1767,1784,1809,1829,1849,1868,1869,1876,3906];

  var codeContained = false;

  for(let i = 2; i < 6; i++){
    for (let j = vorwahlen.length-1; j >= 0; j--) {
      help = input.replaceAll(" ","");
      if(help.substring(1,i) == vorwahlen[j]){
      codeContained = true;
      }
    }
  }

  if (input.match(countryCode) || !input.match(laenderCode)) {
  valid = "Bitte beginnen Sie ihre Telefonnumer mit ihrer Ländervorwahl (z.B. +49 für Deutschland).";

  } else if(!codeContained){
  valid = "Die angegebene Ländervorwahl existiert nicht.";

  } else if (input.match(tooShortRegEx)) {  
  valid = "Die angegebene Telefonnummer ist zu kurz.";

  } else if (!input.match(tooLongRegEx)) {
    valid = "Die angegebene Telefonnummer ist zu lang.";

  } else {
    valid = true;
  }
}