html5表单验证-在可选字段上使用模式

Question

I have an optional form field that I want to use the new html5 pattern option. But, when I add the pattern, the field becomes required even though I do not have the required attribute. I have included the pattern below. I want the user to be able to leave the field blank, but if the user enters something in the field, then I want the pattern applied. How would I accomplish this? Thanks in advance.

pattern="[-a-zA-Z '.,]{3,50}"

Answer 1

The problem is that {3,50} limiting quantifier requires at least 3 occurrences of the chars defined in the character class.

You need to make the pattern optional. Wrap it with an optional non-capturing group:

pattern="(?:[-a-zA-Z '.,]{3,50})?"
         ^^^                   ^^

HTML5 patterns are wrapped with the anchors automatically, ie the pattern above will be translated into ^(?:(?:[-a-zA-Z '.,]{3,50})?)$ and will match

• ^(?: - start of the string
• (?:[-a-zA-Z '.,]{3,50})? - 1 or 0 occurrences of 3 to 50 hyphens, ASCII letters, spaces, ' , . or ,
• )$ - end of string.