.t { margin-bottom: 0.5em; border: 1px solid #ccc; outline: none; } .t:focus { border-color: #abf; } .t:valid { border-color: #9d0; } 
 <input class="t" pattern='^[a-zA-Z]+$' required>

  • Maybe pattern="[a-zA-Z]+\s[a-zA-Z]+" ? pattern="[a-zA-Z]+(?:\s[a-zA-Z]+)?" ? What exactly are the requirements for the pattern? Your expression does not allow spaces at all. Note that ^ and $ not needed here. - Wiktor Stribiżew
  • pattern = '[a-zA-Z] + \ s + [a-zA-Z] + $' need such a code, thank you for your attention - Vladimir Vladimirovich
  • No, $ is not needed. - Wiktor Stribiżew
  • but it works with $))) - Vladimir Vladimirovich
  • Yes, just what is the point of forcing the engine to double check the same thing in the same place? :) - Wiktor Stribiżew

2 answers 2

The \s pattern finds any whitespace characters, \s+ finds any 1 or more whitespace characters.

You can use pattern="[A-Za-z]+\s+[A-Za-z]+" :

 .t { margin-bottom: 0.5em; border: 1px solid #ccc; outline: none; } .t:focus { border-color: #abf; } .t:valid { border-color: #9d0; } 
 <input class="t" pattern="[A-Za-z]+\s+[A-Za-z]+" required>

In the pattern attribute, the HTML5 engine wraps the pattern in ^(?: ... )$ and pattern="[A-Za-z]+\s+[A-Za-z]+" will be compiled as new RegExp("^(?:" + шаблон + ")$") . The u flag is added to Chrome and Firefox: new RegExp("^(?:" + шаблон + ")$", "u") - be on the lookout.

Details

  • ^(?: - the beginning of the line and the beginning of the undetectable (non-capturing) submasks
  • [A-Za-z]+ - 1 or more ASCII letters
  • \s+ - 1 or more whitespace characters
  • [A-Za-z]+ - 1 or more ASCII letters
  • )$ - end of trap and end of line.

Regular expression demo

  • Thank you for the comprehensive answer. just the best! If it's not a secret, where did you get so much knowledge about regular expressions? At least you can drop one link to a Russian resource where all cases of using a 'pattern' are described if this is possible - Vladimir Vladimirovich
  • @Vladimir Vladimirovich Honestly, everything I know, I read online in English or answered questions in English SO. In Russian, mainly quoted Wikipedia . There is a site about regulars in JavaScript . I really like the English-language regular-expressions.info and rexegg.com . - Wiktor Stribiżew
  • You can also read Jeffrey Friedl . - Wiktor Stribiżew
  • Thank you very much, so much useful information, I will quickly penetrate and remember you with a kind word! - Vladimir Vladimirovich
  • but do not tell me lastly the regular schedule, for such a record "1234 1234" pattern = "[0-9] {4} \ s [0-9] {4}" my version does not work - Vladimir Vladimirovich

 .t { margin-bottom: 0.5em; border: 1px solid #ccc; outline: none; } .t:focus { border-color: #abf; } .t:valid { border-color: #9d0; } 
 <input class="t" pattern='[a-zA-Z]+\s+[a-zA-Z]+$' required>

  • That turned out to be simple - Vladimir Vladimirovich