View original (French)

JavaScript: Check the length of a password

Solved
Anonyme209 Posted messages 761 Status Member -  
Ysabe_l Posted messages 11933 Registration date   Status Contributor Last intervention   -
```html

Mot de passe : (Entre 8 et 255 caractères) <input size="60px" type="password" name="mdp" onblur="mdpchange()" />

<script> function mdpchange() { var password = document.getElementsByName('mdp')[0].value; var message = document.getElementById('message'); if (password.length < 8 || password.length > 255) { message.innerHTML = "Le mot de passe doit contenir entre 8 et 255 caractères."; message.style.display = 'block'; } else { message.innerHTML = ""; message.style.display = 'none'; } } </script> ```

10 answers

  1.
    Ysabe_l Posted messages 11933 Registration date   Status Contributor Last intervention   277
     
    Hello,

    You forgot the ; at the end of the first line. 

    var longueur = $_POST['mdp'].lenght;


    Then you create a paragraph or a span where you want to put the error message, giving it an id. You leave it empty. 

    <p id="message"></p>


    You check the length and if it's not correct you write in the empty paragraph. For example, if you want a minimum of 8 characters: 

    if(longueur < 8) { document.getElementById("message").innerHTML = "Warning: the password is not long enough, it must be at least 8 characters long."; }
    1
  2. Anonymous user
     
    Your variable is called "longeur" while what you're alerting is called "longueur", so there is an extra "u".

    As for the little message, I don't really have the required knowledge to do it.
    0
  3. Anonyme209 Posted messages 761 Status Member 19
     
    Hello,
    it's not better with 
    var longueur = document.getElementsByName("mdp").length; alert(longueur);

    A message does appear, but it says "Undefined", instead of the length of the password.
    0
  4. Anonymous user
     
    length is misspelled, you wrote lenght.
    0
    1. Anonymous user
       
      The mistake is mine for misspelling it at the beginning, I'm sorry.
      0
  6. Anonyme209 Posted messages 761 Status Member 19
     
    Hello,

    length is equal to 1 regardless of the length of the password...
    Otherwise, for the message, it works perfectly.
    0
  7. Ysabe_l Posted messages 11933 Registration date   Status Contributor Last intervention   277
     
    Ah but I'm silly!

    I just realized, you trigger the function as soon as the user clicks anywhere other than the password field, so you can't retrieve what's in the field with $_POST[''] since it isn't posted; besides, anyway, you wouldn't be able to because JavaScript cannot access global variables!

    So in your function, you need to "read" the content of the input, for that you will give it an ID: (I’m putting the code back with the style tags in the HTML like you, but you shouldn't do that, use CSS to separate structure and style). 

    <p style='width:300px;'>Password: (Between 8 and 255 characters) <input size='60px' type='password' name='mdp' id='mdp' onBlur='mdpchange()'></p> <p id="message"></p>


    And in the JavaScript function: 

    function mdpchange() { var mdp = document.getElementById("mdp").value; // you retrieve the value of the password var longueur = mdp.length; // you retrieve the length // if the length is not right, you display the message if(longueur < 8 || longueur > 255) { document.getElementById("message").innerHTML = "Warning: the password is not long enough, it must be at least 8 characters."; } }
    0
  8. Pitet Posted messages 2845 Status Member 530
     
    Hello,

    You can also use HTML5 validation (without any JavaScript code) which is now supported by all modern browsers.

    The pattern attribute allows you to define a minimum and maximum number of characters for an input: 
     <input type="password" pattern=".{5,10}" required title="5 to 10 characters">


    Have a nice day!
    0
    1. Ysabe_l Posted messages 11933 Registration date   Status Contributor Last intervention   277
       
      Certainly, but we still need to perform the check for older browsers that are unfortunately still in use, and since he wanted the message to be displayed as soon as the input is finished, and not upon validation.
      0
  9. Anonyme209 Posted messages 761 Status Member 19
     
    First of all, I don't know why you write all length with ght at the end.
    Then, thank you, it works perfectly well.
    I mark the subject as resolved.
    0
    1. Ysabe_l Posted messages 11933 Registration date   Status Contributor Last intervention   277
       
      Personally, because in French there aren't many "th" or "ht" and I write "width" more often, which means my fingers are more used to "th" than "ht".

      But great if it works!
      0
  10. Anonymous user
     
    Tu peux récupérer la longueur en faisant var longueur = $_POST['mdp'].length
    -1
  11. Anonyme209 Posted messages 761 Status Member 19
     
    Bonjour, 

    var longueur = $_POST['mdp'].length; alert(longueur);


    ou 

    var longueur = document.getElementsByName("mdp").length; alert(longueur);


    1. Rien ne se passe...
    2. Cela ne répond pas à ma deuxième question : afficher un petit message en dessous de la zone de texte si la longueur n'est pas suffisante.

    Merci de votre aide.
    -1