skip to Main Content

I am trying to make an input with regex for the following pattern:

  • Force start first character with a capital letter
  • Force first character of other WORDS (letters) capital letter
  • Force all other letters in words lowercase
  • Allow numbers & special characters anywhere except 1st character of words
<input type="text" name="display_name" placeholder="Display Name" id="display_name" required minlength="1" maxlength="32" 
pattern="[A-Z].{1,1}[a-z1-9W_]).{,}[ ]{,}[A-Z].{1,1}[a-z1-9W_]).{,}[ ]{,}[A-Z].{1,1}[a-z1-9W_]).{,}[ ]{,}">

Also, if you can do this pattern, can I also get the same pattern to use for php pregreplace.

2

Answers


  1. As pointed out in the comments, the older regex has some problems. So, you can try this new regex.

    /^[A-Z](?:[a-z0-9W_]+)(?:s+[A-Z](?:[a-z0-9W_]+(?=[A-Z]|s|$))*)$/
    

    This is a fiddle showing some test cases.

    And here is the PHP in which this regex can be used.

    $input = "YourInputStringHere";
    
    $pattern = '/^[A-Z](?:[a-z0-9W_]+)(?:s+[A-Z](?:[a-z0-9W_]+(?=[A-Z]|s|$))*)$/';
    
    if (preg_match($pattern, $input)) {
        echo "Valid input!";
    } else {
        echo "Invalid input!";
    }
    

    And if you want to convert this into function, then try following:

    function isValidName($name) {
        if ($name !== null && $name !== '') {
            $pattern = '/^[A-Z](?:[a-z0-9W_]+)(?:s+[A-Z](?:[a-z0-9W_]+(?=[A-Z]|s|$))*)$/';
            return preg_match($pattern, $name);
        }
        return false;
    }
    

    And, if you want to use Javascript to force the input to follow the regex, you can try the following:

    document.getElementById('display_name').addEventListener('input', function() {
        const pattern = /^[A-Z](?:[a-z0-9W_]+)(?:s+[A-Z](?:[a-z0-9W_]+(?=[A-Z]|s|$))*)$/;
        const displayName = this.value;
        const errorMessage = document.getElementById('error_message'); // This is just for the sake of error showing, you can remove it.
    
        if (!pattern.test(displayName)) {
            // The entered displayName is invalid, showing error. You can change it according to your needs.
            errorMessage.textContent = "Invalid pattern. Please follow the format: Each word starts with a capital letter.";
        } else {
            // Clearing any previously shown errors.
            errorMessage.textContent = "";
        }
    });
    

    And the error_message is just a span. Also, after this Javascript, I don’t think you would need the pattern thing in your input. So, if you are using this Javascript, you can remove the pattern from your input.

    Hope this helps.

    Login or Signup to reply.
  2. When using PHP, you could use:

    ^[A-Z][^A-Zs]*(?:h+[A-Z][^A-Zs]*)*$
    

    The regex in parts matches:

    • ^ Start of string
    • [A-Z] Match an uppercase char A-Z
    • [^A-Zs]* Match 0+ times any character except an uppercase char A-Z or a whitespace char
    • (?: Non capture group to repeat as a whole part
      • h+ Match 1+ horizontal whitespace chars
      • [A-Z][^A-Zs]* Match a char A-Z and 0+ times any character except an uppercase char A-Z or a whitespace char
    • )* Close the non capture group and optionally repeat
    • $ End of string

    See a regex demo.

    For Javascript you could slightly change the regex to:

    ^[A-Z][^A-Zs]*(?:[^Sn]+[A-Z][^A-Zs]*)*$
    

    See another regex demo

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search