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

[kimchicoding]

Thanks @jon_morris! This was great!

[tera4022702328]

this explained a lot. thanks!

[script0139062083]

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

Mike

[ruby1221504391]

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.

[mtf]

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

[web1084696464]

I completely missed that…I need to slowdown. ty

[aaronzel]

It still doesn’t make sense

[aaronzel]

Thank you It all make sense now

[arrayace28435]

So useful, thank you!

[valeriadaffarra]

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

[mtf]

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

[arc4220929525]

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.

[jon_morris]

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  =>  @css7427613763 link to response , @ramonkos link to response
@el_escandalo link to question   =>  @karolisvaitkevicius6 link to response
@booga    link to comments    =>  @mega9792057035 link to response
@krakia    link to question
@mtf , @dragon.fly

@arc4220929525

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.

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:
 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).

@jon_morris

@jon_morris

I’m not sure what would happen if you didn’t include anything after the class definition e.g. just [a-zA-Z0-9] .

I’ve had a play with this and it seems to default to an input constraint of 1 character, equivalent to {1,1} i.e. it allows an input of any single lower or upper case letter, or any single number, but It doesn’t allow leaving the field blank, or an input of 2 or more characters.

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 …

@ramonkos

I think the difference between the first:

minlength="3" maxlength="15" pattern="[a-zA-Z0-9]+"

and the second:

pattern="[a-zA-Z0-9]{3,15}"

is, that the first solution let the user know, that the amount of characters is incorrect.
But the second solution just tells the user, that the input didn’t match the requested format. So, the first solution gives the user more information on what exactly went wrong.

This post from @mega9792057035 also provides some great analysis and detail about the different default error messages that are generated …

@mega9792057035

@booga

If we use: [0-9]{14,16},
Then the we can omit the elements: minlength=“14” maxlength=“16”?
Because they seem to do the same thing, right?

From reading through this thread and playing around they are similar but not the same.

minlength
when the minimum length is not met and you click outside the input box then hover your mouse over it you will be prompted to enter the minimum number of characters. If you try to submit you will receive and error message that tells you the minimum number of characters you must enter (and how many you tried to enter).

maxlength
When the maximum number of characters are reached it will not let you enter any more characters. There is no submission error from having too many characters as you simply can’t enter more than the maxlength in this input field in the first place.

pattern=“[0-9]{3,8}”
minimum submission is three characters maximum submission is 8 characters. This does not limit how many characters can be input into the field. It only limits what can be submitted.
Any breach of any aspect of the pattern attribute seems to result in the same error message
“please match the requested format”.
Clicking outside the input field and hovering the mouse over the field will bring up the same message as a prompt.

The error message from the pattern attribute seems to overrides that of the minlength error message.

Thus if you have minlength and maxlength set correctly then you should use + or * in the pattern attribute.

Unless including some combination of patterns makes the pattern a better place to set the minimum or maximum length. That’s beyond me at the moment. In this simple format though minlength and maxlength seem to be the better attributes as the feedback is more clear and specific if the user gets it wrong.

And just to expand on this particular point …

@mega9792057035

Thus if you have minlength and maxlength set correctly then you should use + or * in the pattern attribute.

… 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.

[jon_morris]

@naracodes

• with the “{3,15}” quantifier, user can keep on typing past the 15 character maximum length, and won’t be alerted that the user has gone past the max length (of 15) until user hits “Submit” button,
• whereas with the “+” quantifier paired along with the “minlength” and “maxlength”, user is stopped from unnecessarily typing past the limit of 15 characters.

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 …
  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.

@jon_morris

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.

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

[josbeltd]

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

[mtf]

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

[mtf]

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.

[ahsanabbas071]

Most helpful explanation. Thank you <3

[method0417922125]

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

[heat84]

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