How to restrict the same character from being used consecutively?

14,429

you can add this : (i updated the fiddle : https://jsfiddle.net/ck7f9t6x/5/)

    var lastKey = this.value.charAt(this.value.length-1);
          alert("lastKey = " + lastKey);
          if(lastKey == key){

            return false;
          }
          else{
          var numResValue = [0, 0];
          for (var a = 0; a < numRestricted.length; a++) {
            for (var b = 0; b < this.value.length; b++) {
              if (this.value.charAt(b) === numRestricted[a]) {
                numResValue[a] += 1;
              }
            }
    ...

}
Share:
14,429
Angel Politis
Author by

Angel Politis

Author • Entrepreneur • Developer • 25 Skills: • Expert in: html, css, javascript, php, sql • Pretty good at: java, c++, python Let's talk: • I've just recently decided to give Twitter a chance. • For professional inquiries, you can contact me at [email protected]. 🎇 THE END 🎇

Updated on June 14, 2022

Comments

  • Angel Politis
    Angel Politis almost 2 years

    I am trying to create a username input and I want to restrict the user's input onkeypress. The limit of characters that can be entered is 20 + 1 being the fixed prefix.

    What I want to achieve is:

    1. To restrict user input and accept only A-Z, 0-9, dash (-) and underscore (_). [Solved]
    2. To prohibit the user to start their username with dash (-) or underscore (_). [Solved]
    3. To prohibit the user to use dash (-) if they have used underscore (_) and the opposite. [Solved]
    4. To allow the user to use a max of 3 dashes (-) or 3 underscores (_). [Dashes Solved]
    5. To prohibit the user to use consecutive symbols like so (user___ or user--p, etc) [NEED HELP!]

    What I can't seem to figure out is how to restrict the underscore (_) to 3 max and how to stop consecutive dashes (-) and underscores (_).

    Any help and proper explanation would be greatly appreciated!

    My HTML:

    <form name = "RegForm" method="post" action="index.html" class="login">
        <input type="text" maxlength = "21" name="userID" id="userID"/>
    </form>
    

    My JavaScript:

    var userID_textfield = document.forms.RegForm.userID;
    userID_textfield.onkeypress = function(e) {
    
        // Invalid character list
        var prohibited = "!@#$%^&*()+=;:`~\|'?/.><, \"";
        // List of characters that can't be first
        var posRestricted = "-_0123456789";
        // List of characters that can't be used more than once
        var numRestricted = "-_";
        // Get the actual character string value
        var key = String.fromCharCode(e.which);
    
        /* Goal:
           Validate: Accept only a-z, 0-9, - and _ */  
        if (prohibited.indexOf(key) >= 0) {
            console.log('Invalid key pressed');     
            return false;
        }
        else {
            /* Goals:
               1. Validate: -, _ and 0-9 can't be first
               2. Validate: - and _ can't be last if the userID is 21 characters long */
            if ((posRestricted.indexOf(key) >= 0 && this.value === "@") || (numRestricted.indexOf(key) >= 0 && this.value.length === 20)) {
                console.log("Username can't start with a number, a dash (-) or an underscore (_)");
                return false;
            }
            /* Goals:
               1. Validate: - and _ can't be used more than once each
               2. Validate: if - exists _ can't be used and the opposite' */
            else if (numRestricted.indexOf(key) >= 0) {
                var numResValue = [0, 0];
                for (var a = 0; a < numRestricted.length; a++) {
                    for (var b = 0; b < this.value.length; b++) {
                        if (this.value.charAt(b) === numRestricted[a]) {
                           numResValue[a] += 1;
                        }
                    }
                }
                for (var c = 0; c <= numResValue.length; c++) {
                    if (numResValue[c] < 3) {
                        if (this.value.indexOf(numRestricted.replace(key, "")) === -1) {
                            return true;
                        }
                        else {
                            return false;
                        }
                    }
                    else {
                         return false;
                    }
                }
            }
            else {
                return true;
            }
        } 
    };
    

    You can view the code in action here.