What are quantifiers? (the `+` and `{14,16}`)

Thanks @jon_morris! This was great!

1 Like

this explained a lot. thanks!

1 Like

Roy- Thank you for all of your answers. They have helped and continue to help me.

Mike

2 Likes

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.

‘a’ characters. {1,} is the equivalent quantifier.

I completely missed that…I need to slowdown. ty

1 Like

It still doesn’t make sense

Thank you It all make sense now
:smiley:

So useful, thank you!

Hi I have a question. They say how to exclude special characters, but how to INCLUDE them in […]? thank you

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

1 Like

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.

Hi @arc4220929525,

Also tagging others who I’ve seen have previously made comments in this discussion thread which relate to this particular issue you’ve raised, or who have asked a question related to it. Hopefully, you’ll all find it a useful summary, which draws several related points together, and ties up some loose ends:
@agentgenx  link to comments  =>  @css7427613763link to response , @ramonkoslink to response
@el_escandalo link to question   =>  @karolisvaitkevicius6link to response
@booga    link to comments    =>  @mega9792057035link to response
@krakia    link to question
@mtf , @dragon.fly

If we don’t append either+or*or{3,15}  to the pattern attribute’s regex value, as follows …

<input id="username" name="username" type="text"
 required minlength="3" maxlength="15" pattern="[a-zA-Z0-9]">

… 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:
:warning:Please match the requested format.

And if I enter just  A  into the Username input field and then click Submit, I get …
:warning: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 …
:warning: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 …
:warning: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.

Unless you also include maxlength="15" with pattern="[a-zA-Z0-9]{3,15}" e.g.

<input id="username" name="username" type="text"
 required maxlength="15" pattern="[a-zA-Z0-9]{3,15}">

and

<input id="username" name="username" type="text"
 required minlength="3" maxlength="15" pattern="[a-zA-Z0-9]+">

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 …
    :warning: 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 …
    :warning: Please match the requested format.

You’ll find further details related to this, in the post that the above quote is from.

Hope that helps to make things even clearer :slightly_smiling_face:

does it mean a+ includes all variations with letter a ?

1 Like

Forgive me, I’m a little out of step these days. I believe it means one or more of the literal, ‘a’.

2 Likes

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.

4 Likes

Most helpful explanation. Thank you <3

1 Like

So glad I didn’t give up on this thread(aka bookmark it for another time lol)… this was so helpful! Thank you!

2 Likes

I’d love to be as out of step with this as you are.LOL

1 Like