So does this mean that without the “+”, the input field would only accept a response with one or less “a” characters? Or only one or less “1” characters? etc.
To match a character having special meaning in regex, you need to use a escape sequence prefix with a backslash ( ** ). E.g., . matches “.” ; regex + matches “+” ; and regex ( matches “(” . You also need to use regex \ to match "" (back-slash). Regular Expression (Regex) Tutorial
The question is why do I need the + in this example exercise when a character limit is already defined by the minlength and maxlength attributes? You said the + gives an unlimited amount of characters that fit within the class constraints, but in this exercise the minlength is set to 3 and maxlength to 15.
… then, even if we enter between 3 and 15 permitted characters (any upper or lower-case letters, or any digits from 0 to 9), the regex [a-zA-Z0-9] will not allow this input to actually be submitted.
This is because the regex [a-zA-Z0-9] only allows an input of 1 character out of any of the permitted characters (defined within the square brackets) to be submitted. Therefore, this regex, and the range defined by the minlength="3" and maxlength="15" attributes, are mutually exclusive, meaning that it will be impossible for the user to submit a valid Username.
For example, I’m using the Chrome browser and if I enter A2cD5f into the Username input field and then click Submit, I get the following default form-validation error message: Please match the requested format.
And if I enter just A into the Username input field and then click Submit, I get … Please lengthen this text to 3 characters or more (you are currently using 1 character).
The maxlength attribute affects the number of characters the user is physically able to enter into the input field — they are prevented from entering more than the permitted maximum.
The minlength attribute doesn’t affect the number of characters the user is able to enter into the input field. Instead, if the user has already entered at least 1 character, but the number of characters in the input field is less than the minimum character requirement, the minlength attribute is used to generate an error message alerting the user to the minumum character requirement, and how many characters they’ve entered so far. However, this error message is only generated when (i) before the user clicks submit they have moved the cursor away from the input field and then returned to hover over it, or (ii) upon clicking submit (in which case the data also won’t be submitted).
The regex value doesn’t have any affect on what the user is initially able to enter into the input field. Instead, it is used to validate what has already been entered by the user when the Submit button is clicked. If the regex constraint has been met, the characters in the input field are submitted. But if the regex constraint hasn’t been met, the browser generates an error message and no data is submitted.
I think the following 2 posts make some good points about what these differences mean from a practical point of view …
This post from @mega9792057035 also provides some great analysis and detail about the different default error messages that are generated …
And just to expand on this particular point …
… having done some more testing, in this case it doesn’t make any difference whether we use + or * because including a minlength attribute will ensure that with either + or * the user (i) cannot submit less than the minumum number of characters, and (ii) will get the informative, user-friendly, default error message … Please lengthen this text to X characters or more (you are currently using X character(s) ).
… whenever any number of characters greater than 0 and less than the minimum have been entered into the input field.
I’ve also confirmed that, as long as we use the minlength and maxlength attributes to define the character range, there is an advantage to appending either + or * to the regex instead of also defining the maximum and minimum number of characters within curly braces, here, as well e.g. {3,15}
This is because with {3,15} we get the more generic, and less user-friendly error message … Please match the requested format.
… whenever any number of characters greater than 0 and less than the minimum have been entered into the input field.
At least that’s what happens with the Chrome browser I’m using. I’m aware that there could be some minor differences in what, how and when default error messages are generated using other browsers, and that this could be enough for some of these findings not to apply when using those browsers.
The other important point to make is that some of these finer points will also not apply if, instead of relying on the default form-validation error messages generated by the browser, we customise our form validation using additional HTML, CSS, or code from form-validation libraries.
will both prevent the user from physically entering more than 15 characters into the input field.
However, whenever any number of characters greater than 0 and less than the permitted minimum (i.e. here, 1 or 2 characters) have been entered into the input field …
With + instead of {3,15} , as long as we also include the minlength attribute (as in the 2nd example above), we get the informative, user-friendly, default error message … Please lengthen this text to X characters or more (you are currently using X character(s) ).
But, with {3,15} instead of + (as in the 1st example above), even if we also add minlength="3" , we only get the more generic, and less user-friendly, error message … Please match the requested format.
You’ll find further details related to this, in the post that the above quote is from.
In my humble opinion, while the feature is built in to the browser, HTML is not where to engage the RegEX engine. It goes against separation of behavior from the document which is not meant to have its own behaviors.
We could easily hand off the form validation duties to a script, and would be writing more future proof code (and markup) in the process.
Bottom line, don’t hang around this lesson for too long.