How to make input validation

Ask us anything How do I?
1

Hello,

  1. I have Input element from WeWeb(Short answer).

  2. I want to restrict user to be able to enter only characters from certain Alphabet, and if user input other characters to show alert error message.

  3. In this WeWeb tutorial(4 months old) is shown Custom validation options which not exist in current WeWbe input element: https://www.youtube.com/watch?v=1rO98aw7xdw

  4. I have try with WeWeb AI but it point me to Event section in property bar which again dont exist.

From WeWeb AI:

  • Add an Event: In the properties panel of the input element, look for the “Events” section. Here, you can add a new event.
  • Choose the Event Type: Select either change or blur as the event type. The change event triggers when the input loses focus and its value has changed, while the blur event triggers when the input loses focus.
  1. I have try with masked input but again without success. Probably i dont know how to do it. Any help?
2

Hi Zoran,

I made with custom JS. Found it to be the easiest way.

On input “OnChange” event I just trigger the following code, which checks if the input value contains the target phrase “IP” and if it does, then removes the phrase and returns the rest of the input.

I also have “was_changed” parameter which is not necessary. I just use it to be aware if the code has made any changes to the input value.

const input = variables['a78ec4fc-4112-412c-aeda-d800e356f73c'];

let value = input;
let was_changed = false;

if (typeof input === 'string') {

  const newValue = input.replace(/^IP[\s\u00A0\u2000-\u200B\u202F\u205F\u3000]*/i, '');

  if (newValue !== input) {
    value = newValue;
    was_changed = true;
  }
}

return {
  value: value,
  was_changed: was_changed
};
1 Like
3

Hello Batik,

Thank you for replly

  1. Which action i need to use on Change event, Pass through condition?

{3CB7C601-85C7-46C6-AC30-26D933C5738B}
{3CB7C601-85C7-46C6-AC30-26D933C5738B}382×847 35.8 KB

  1. In my case i dont have target phrase, i need to allow user to be be able to enter any letter from Macedonian alphabet which is Cyrillic(lowercase: абвгдѓежзѕијклљмнњопрстќуфхцчџш and upercase: АБВГДЃЕЖЗЅИЈКЛЉМНЊОПРСТЌУФХЦЧЏШ) and to not be allowed to enter other alphabets.

  2. If user try to enter other characters than specified, to show simple alert message.

4

you need to use “custom JavaScript” action:

image
image307×126 6.19 KB

As for the proper code you just can ask Weweb AI or another LLM to write a code for you according to your task. Like this:

image
image894×879 54 KB

function cleanMacedonianString(myString) {
  const macedonianLetters = 'абвгдѓежзѕијклљмнњопрстќуфхцчџшАБВГДЃЕЖЗЅИЈКЛЉМНЊОПРСТЌУФХЦЧЏШ';
  // Use regex to match all characters not in the allowed set and remove them
  const regex = new RegExp(`[^${macedonianLetters}]`, 'g');
  return myString.replace(regex, '');
}


let myString = "Здраво, World! 123";
myString = cleanMacedonianString(myString);
console.log(myString); // Outputs: "Здраво"
5

Thank you Batik

This is how i have made:

const input = document.getElementById(“ReceiverName”);
const allowedRegex = /[1]*$/;
const value = input.value;

if (!allowedRegex.test(value)) {
setTimeout(() => {
input.value = value.replace(/[^АБВГДЃЕЖЗЅИЈКЛЉМНЊОПРСТЌУФХЦЧЏШабвгдѓежзѕијклљмнњопрстќуфхцчџш]/g, ‘’);
}, 100);

variables[‘invalidInput’] = true;

} else {
variables[‘invalidInput’] = false;
}

And it works but have one problem. From time to time it not delete wrong characters. Probably this need to be done in a way to check keypress or keydown and if charachter is not allowed to cancel entering it in input. I have try allot of thing also with help of ChatGPT and WeWeb Ai but without help. Also dont know how to prevent pasting in input.

  1. АБВГДЃЕЖЗЅИЈКЛЉМНЊОПРСТЌУФХЦЧЏШабвгдѓежзѕијклљмнњопрстќуфхцчџш ↩︎

6

Try to activate debounce =200ms or 300 ms in the settings of the input field. . That should solve the problem.

I assume that the code just doesn’t have enough time to execute in the case of fast typing. Debounce should help.

8

Thank you. It do the job

2 Likes