Comma separated words Regex (html input pattern) - html

im trying to force the user to input comma seperated words and reject any white space seperated words using the pattern attribute thats part of the HTML5 <input/> tag .
My following Expression expression doesn't work even though this says it does when I plug it in and test it.
My expression : ^((([a-zA-Z]\s*)+)\, ?(([a-zA-Z]\s*)+))$
<div class="col-md-6">
<input type="text" id="traits" name = "traits" class="form-control" placeholder = "crazy, hyper, outgoing" pattern="^((([a-zA-Z]\s*)+)\, ?(([a-zA-Z]\s*)+))$" required>
</div>

This allows only comma separated words:
^[a-zA-Z]+(,[a-zA-Z]+)*$
No spaces allowed, no more than one comma at a time, and commas should be only between words.
Demo

Related

Web form fill using VBA & Selenium

I have problem with the form filling. Already tried using following methods:
driver.FindElementByXPath("//div[#id='s_dane_dokumentu-section?grid-1-grid?c_nr_lrn_komunikatu-control?xforms-input-1']").sendkeys "21123456"
and
driver.FindElementByXPath("//div[#id='s_dane_dokumentu-section?grid-1-grid?c_nr_lrn_komunikatu-control?xforms-input-1']").value = "21123456"
I noticed that ☰ character was displayed in VBA as "?". The full XPath also gives an error. Entire form have a lot of fields, I'm stuck on the first one...
HTML:
<input id="s_dane_dokumentu-section☰grid-1-grid☰c_nr_lrn_komunikatu-control☰xforms-input-1" type="text" name="s_dane_dokumentu-section☰grid-1-grid☰c_nr_lrn_komunikatu-control☰xforms-input-1" value="" class="xforms-input-input" aria-required="true" aria-invalid="true">
I might by inclined to use a substring match for the id via css attribute = value selector with $ ends with operator. In addition, add in the class and the type selector for the shown input element for extra specification.
driver.FindElementByCss("input.xforms-input-input[id$=xforms-input-1]").sendkeys "21123456"
You could also just use a single quote enclosed (for the value) attribute = value selector for the id. The prevents the WebDriver being thrown by the special characters.
driver.FindElementByCss("[id='s_dane_dokumentu-section☰grid-1-grid☰c_nr_lrn_komunikatu-control☰xforms-input-1']").sendkeys "21123456"

Pure HTML input type text validation using pattern

Recently I tried alot but I still unable to figure how should I able to validation for my text field. I hope I can get some help from here, my questions is I want to validate input text field only accept A-Z a-z 0-9 and space within word. And at least one char or number.
For example, "abc def" , "abc092", "abcdef"
Only in HTML input tag element .
I tried this
but this pattern unable to fullfil my requirements.
the pattern i want to achieve is
1) abc def
2) abcdef
3) abc123
4) a1b2c3 d4e5
5) allow to have empty space within words
the pattern i dont want to accept is
1) empty string
2) no alot of whitespace at the begining or end of the string
3) no bracket and etc special characters
Try
<input type="text" pattern="^\w+([\w ]*\w)*$">
Basically the break down is this:
\w+ - Select a word character ("A-z0-9") one or more times
()* - Select what's in here 0 or more times, which is
[\w ]*\w - Select a word character or space one or more times followed by another word character
No leading or trailing white space allowed. Only word characters allowed and internal spaces.
For some unit tests and breakdown of the regex see: https://regex101.com/r/7UnL9J/1
You can use the Pattern attribute with regex but it is supported only in HTML 5.
Like this " id="username" pattern="[A-Za-z0-9]+"
Check the below link for more information
https://html.com/attributes/input-pattern/#Username_Patterns
Have you tried this?
<input type="text" pattern="[a-zA-Z0-9\s]+">

Html regex pattern: [\d\s-]{3} works but [\d-\s]{3} doesn't. Why?

Codepen example:
https://codepen.io/Trost/pen/KXBRbY
Try putting 1 symbol in both fields.
I can't get what's wrong. If I test these regex in https://regex101.com, they appear to be identical.
<form>
Works: <input type="text" name="country_code" pattern="[\d\s-]{3}" title="-23" required>
<input type="submit">
</form>
<form>
Bug: <input type="text" name="country_code" pattern="[\d-\s]{3}" title="- 3" required>
<input type="submit">
</form>
The real root cause here is that the regex [\d-\s] is used in the pattern HTML5 attribute, and in the latest versions of Chrome and FireFox is compiled as an ES2015-compatible regex with the u modifier. The consequence is that there are much stricter escaping rules for the Unicode regex patterns.
What it means is whenever a char cannot be parsed unambiguously, it is an error. When a char is escaped, but does not need escaping, it is again an error.
The chars that you may escape in the character class inside a u based regex are +, $, ^, *, (, ), |, \, [, ], ., ?, -, {, } (see this source). If the - is at the start/end of the character class, it still can go unescaped, as it can only be parsed as a literal hyphen there.
In between two shorthand character classes, an unescaped - will produce an error because it is treated as a user error.
So, either place a hyphen at the start/end (it is always the best option), or escape it inside the character class (and never escape it outside of the character class).
You define two different things:
[a-z] is a definition of a range - all characters from a to z.
[az-] is a definition of a set of three elements - a, z and
-.

Firefox input pattern regex range

This is related to the same problem as this question:
Firefox error: Unable to check input because the pattern is not a valid regexp: invalid identity escape in regular expression
When using escaped characters in the <input> pattern attribute, Firefox throws these errors to the console:
Unable to check <input
pattern='^[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa-zA-Z\s\'-]{1,50}$'>
because the pattern is not a valid regexp: invalid identity escape in
regular expression
So when using the pattern attribute on an <input> field, the unicode characters no longer need to be escaped. In that case the user simply needs to stop escaping their characters and change \#\% to #%, problem solved.
I've got this somewhat more complicated regex pattern, what do I change it to to work in Firefox?
<input type="text" pattern="^[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa-zA-Z\s\'-]{1,50}$">
Essentially it's allowing for any string between 1..50 characters in length as long as all the characters are within these ranges:
\u00A0-\uD7FF
\uF900-\uFDCF
\uFDF0-\uFFEF
a-z
A-Z
as well as whitespace, apostrophes and hyphens. A quick search sees the \u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa part of it fairly widely used in all sorts of regexes. I just don't see exactly what to use instead of the escaped unicode character references here.
You need to remove the escaping backslash before the single quote.
Note that in a regular HTML5 pattern field, one does not have to use ^ and $ anchors at the pattern start/end as the HTML5 pattern attribute encloses the passed pattern with ^(?: and )$. However, as per your feedback, the Abide validation circumvents this and passes unanchored pattern to the regex engine. Thus, you should keep the anchors.
<input type="text" pattern="^[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa-zA-Z\s'-]{1,50}$">
A quick demo:
<form>
<input type="text" pattern="[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa-zA-Z\s'-]{1,50}">
<input type="submit">
</form>

How can I POST html?

I need to send a form to PHP, but one of the fields contains HTML.
When it's in the form it's fine, and will show:
<input id="addNote" value="<div class="line">This is my line</div>"/>
However, when I POST it to the server, the HTML tags have been stripped out, so it comes through as 'This is my line'. What do I need to do to make sure the tags don't get stripped out?
Thanks!
When embedding html-in-html, you should encode the HTML metacharacters so they can't be mis-interpreted:
<input id="addNote" value="<div class="line">This is my line</div>" />
This is especially true with " characters, as they'll break the form for the parser. e.g.
<input ... value="<div class="line" .... />
^---
The indicated quote will be translated as ENDING the value= portion, and line" being the start of some other non-standard/unknown tag attribute.
<input id="addNote" value="<div class="line">This is my line</div>"/> does not work at all!
Since you're using " to limit the value of the input field, you have two choices:
Change the " character to ':
This is my line'/>
Substitute the quotes (") inside the value for ":
This is my line"/>
However, none of this matters if your PHP script deletes HTML tags...
in your .php file use this -
echo htmlentities($_POST['addNote']);
and in your html file use single quote.
<input id="addNote" name="addNote" value="<div class='line'>This is my line</div>"/>