I want to verify if the pseudo of the user is good while he is writing

Question

I am creating a small community blog and I would like each new user to have a nickname that begins with a capital letter, followed by at least two lowercase letters, followed by at least one number and I want to do the checks all first with javascript then with php.

For javascript checks, I would like this to happen when typing in the field (event input) and if the nickname does not match the rules the border of the input field turns red as in most websites.

For that, I have a function that deals with the coloring and that takes two parameters and another that checks if the entered data correspond to the regex it contains. The latter takes a parameter too. But my code does not work as I would have liked. Please guide me.

function surligne(champ, erreur)
{
    if(erreur)
         champ.style.backgroundColor = "red";
    else
         champ.style.backgroundColor = "";
}


function verifPseudo(champ)
{
   var regex= /^[A-Z][a-z]{2,}[0-9]+/;

   if(!regex.test(champ.value))
   {
         surligne(champ, true);
         return false;
   }
   else
   {
         surligne(champ, false);
         return true;
   }
}

var pseudoElt=document.getElementById("pseudo");

pseudoElt.addEventListener("input", verifPseudo(this));

In another forum, someone told me that the problem comes from my function in the addEventListenener

Then just use `this` instead of `champ` in your `verifPseudo` function. — Niet the Dark Absol, Jun 15 '19 at 15:25
"my code does not work as I would have liked": Please elaborate. — Scott Hunter, Jun 15 '19 at 15:25
Hello Niet the Dark Absol, I have replaced all "champ" in my function verifPseudo with "this" but nothing works. Hello Scott Hunter; I want my pseudo field to be red when the pseudo is not written as i asked — fathi93, Jun 15 '19 at 16:20

Krishanu · Accepted Answer · 2019-06-15T16:13:13.793

Passing this in verifPseudo will not work because this is not the input field, but the whole window, page, document whatever it is called!

You can try this code, after i changed

function surligne(champ, erreur)
{
     if(erreur)
          champ.style.backgroundColor = "red";
     else
         champ.style.backgroundColor = "";
}
function verifPseudo(champ)
{
     var regex= /^[A-Z][a-z]{2,}[0-9]+/;
     if(!regex.test(champ.target.value))        //passed target elements value
     {
          surligne(champ.srcElement, true);     //passed the source element to work on
          return false;
     }
     else
     {
          surligne(champ.srcElement, false);
          return true;
     }
}

var pseudoElt=document.getElementById("pseudo");

pseudoElt.addEventListener("input", e => {    //changed from verifPseudo(this)
     verifPseudo(e)
});

If you do not want ES6 code, then use this event listener instead

pseudoElt.addEventListener("input", function(e){ 
     verifPseudo(e); 
});

score 0 · Answer 2 · answered Jun 15 '19 at 15:50

I think the problem is with this line of code

pseudoElt.addEventListener("input", verifPseudo(this));

You can not pass an argument like that because it is invoking that function instead of being invoked when an event happens. You can look here for more information and how it can be solved here: How to pass arguments to addEventListener listener function?

I want to verify if the pseudo of the user is good while he is writing

2 Answers2