Kevin Powell - Community•14mo ago

Regex pattern returns true, while inside function returns false

Hello everyone, I am working on a little project to dive deeper into HTML,CSS and Javascript and I came across rpoblem in one of my functions, where I use a fully working regex pattern. I tested it in console.log, it always returns true for the strings i am checking. Here is the pattern:

const regex = /^[\p{L}\s]+$/giu;

const regex = /^[\p{L}\s]+$/giu;

Now my function in which i am using it always returns true, according to console.log. Here is the code for the function:

function validateFirstName(firstName) {
    const regex = /^[\p{L}\s]+$/giu;
    console.log(firstName);
    console.log('firstname validation with regex',regex.test(firstName));
    return regex.test(firstName);
};

function validateFirstName(firstName) {
    const regex = /^[\p{L}\s]+$/giu;
    console.log(firstName);
    console.log('firstname validation with regex',regex.test(firstName));
    return regex.test(firstName);
};

Is there something I don't understand here, because when i run the following if statement or simply logging the validateFirstName function, it returns false, regardless the regex pattern. Here is how i checked:

console.log('Before validateForm');

    if (!validateFirstName(firstName)) {
        console.log('Validation failed');
        alert('First Name must consist of letters and/or spaces');
        return false;
    }

    console.log('Validation passed');

console.log('Before validateForm');

    if (!validateFirstName(firstName)) {
        console.log('Validation failed');
        alert('First Name must consist of letters and/or spaces');
        return false;
    }

    console.log('Validation passed');

29 Replies

Joao•14mo ago

Can you give examples of the inputs? Otherwise we're guessing blindly. How did you check in console log? If you rely on the preview as you type you may have incorrect results as it doesn't always evaluate properly until you run the code.

MarkBoots•14mo ago

are you using that second block of code inside another function? what are you doing with the returned value maybe you can make a codepen, so we can look at a working example

StoicWandererOP•14mo ago

The output for the regex.test is true for the strings i am checking at input, but when i use the function in the if statement then the Validation failed message shows always even though the pattern test evaluates to true

ἔρως•14mo ago

which strings?

MarkBoots•14mo ago

It works for me, so probably something else is messing things up for you. That's why we ask for a bit more context, and preferably a running example https://codepen.io/MarkBoots/pen/rNorKgq

Mark Boots

CodePen

rNorKgq

...

ἔρως•14mo ago

there is indeed not enough information to even start guessing what the problem might be

Choo♚𝕂𝕚𝕟𝕘•14mo ago

What is the meaning of this regex code? I have never seen \p before and I can't find any information on that. If I test it in Regex101, it works the same with or without the slash because there is no special esacaped version of p. Also, what is the meaning of L inside the braces? The braces are usually used with a number.

ἔρως•14mo ago

it matches an unicode character class

Choo♚𝕂𝕚𝕟𝕘•14mo ago

But is that the Ecmascript flavor of regex or some other flavor?

ἔρως•14mo ago

\p{L} <-- this matches anything that looks like a letter, like ç ã and stuff i remember it being in ecmascript but pcre has it too

ἔρως•14mo ago

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape

Unicode character class escape: \p{...}, \P{...} - JavaScript | MDN

A unicode character class escape is a kind of character class escape that matches a set of characters specified by a Unicode property. It's only supported in Unicode-aware mode. When the v flag is enabled, it can also be used to match finite-length strings.

ἔρως•14mo ago

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode#unicode-aware_mode

RegExp.prototype.unicode - JavaScript | MDN

The unicode accessor property of RegExp instances returns whether or not the u flag is used with this regular expression.

ἔρως•14mo ago

https://caniuse.com/mdn-javascript_builtins_regexp_unicode <-- the browser support is quite good

StoicWandererOP•14mo ago

@everyonehttps://codepen.io/arskeliss/pen/zYyLMxe I wrote it in Codepen, but now it wont take the input value from the form...i dont'get this...anymore

Paul Andrei Ciocan

CodePen

Regex True or False

...

StoicWandererOP•14mo ago

try with this input string Pál András it doesn't read the input value

Joao•14mo ago

I'm starting to think that the \p{L} is just not very well supported on JavaScript or something. I'm getting reallyweird behavior, if I run the test multiple times I get intermittent true/false results even with the same input... The only way I got it to work is to declare the regex from scratch every time:

const form = document.getElementById("container");

form.addEventListener("submit", function (event) {
  event.preventDefault();
  const firstName = document.getElementById("firstName").value;
  const re = new RegExp(/^(\p{L}|\s)+$/, 'giu');

  if (!re.test(firstName)) {
    console.log(firstName + " Validation failed");
    return false;
  }
  
  console.log(firstName + " Validation passed");
});

const form = document.getElementById("container");

form.addEventListener("submit", function (event) {
  event.preventDefault();
  const firstName = document.getElementById("firstName").value;
  const re = new RegExp(/^(\p{L}|\s)+$/, 'giu');

  if (!re.test(firstName)) {
    console.log(firstName + " Validation failed");
    return false;
  }
  
  console.log(firstName + " Validation passed");
});

Not, you were capturing the value from the input once when the JS loaded. You want to load it every time. And, for the record, next time provide all the details about the issue upfront instead of having everyone guessing for you like headless chickens

ἔρως•14mo ago

he's reading the value BEFORE the submit const firstName = document.getElementById('firstName').value; line 1 that's why it doesn't work remove the .value from there and add it to line 16: firstName.value that's all you need to change

Joao•14mo ago

No, that's not it. It's the regexp, somehow.

ἔρως•14mo ago

then how did i fixed it in the codepen by doing that single change?

MarkBoots•14mo ago

why not just use formData() to get the input values? no reason to queryselect all input elements seperatly I showed how it works in my pen

ἔρως•14mo ago

depends on the intention, that might not always be viable but for this use case, it might work better however, if you want to add/remove a class, your solution is clunky

Joao•14mo ago

Are you sure? I just tried your suggestion and it fails the check every time. Even with valid inputs.

ἔρως•14mo ago

yes, im sure

Joao•14mo ago

Well, it's not working for me but MarkBoots solution using the regex from scratch everytime does, similar to how I did it. It's the only difference. There must be something wrong with how JS handles this particular character set

ἔρως•14mo ago

the "character set" is utf-16, if im not mistaken oh, yeah, i changed the regex too /^(?:\p{L}|\s)*$/iu <-- this is the regex i've used i didn't do anything else by the way, i forgot to say this the regex change is crucial, because you cant have character classes in a character class for example, you cant really do [\s] you can, its valid syntax, but doesnt do what you want and also i took your regex and added the ?: so that it doesnt capture the output, making it slightly faster

StoicWandererOP•14mo ago

Thank you for helping out with this issue, it was tremendous help, i will change the code after getting back from work and after I finish the whole little project I'll share it with you

ἔρως•14mo ago

you're welcome

StoicWandererOP•14mo ago

Actually this worked in the whole projects code

StoicWandererOP•14mo ago

@Joao @ἔρως I have finished my Weight Tracker project, if you are interested, please take a look here https://andrejmoltok.github.io/level3/

Project Level Nav

Gaming

Programming

Regex pattern returns true, while inside function returns false