HTML5 vs Pristine RegEx patterns

[missmatsuko]

From the README, it seems that Pristine requires the use of / to contain the RegEx pattern:

pattern="/[a-z]+$/i" or data-pristine-pattern="/[a-z]+$/i"

When these delimiters are added in the pattern attribute, HTML5 validation doesn't work as a fallback [example].

When I tried adding both pattern with the HTML5 RegEx format and data-pristine-pattern with a JS RegEx format to the same input, the error message was duplicated.

[Dayniight]

You can use addValidator to use specific rules :)

[missmatsuko]

Well I think Pristine is going to validate the form based on the pattern given in the pattern attribute automatically. It works fine with Pristine, but I wish it accepted the same pattern I'd give for HTML5 validation so that it still (kind of) works as a fallback.

[luca-vercelli]

Ok, now I understood why the developer (@sha256 ?) decided to keep the "/" in patterns. With "/" it is possible to add modifiers after pattern, such as pattern="/goofy/i" . HTML5 does not allow this, you should write something like pattern="goofy|GOOFY". The "i" modifier is the only one interesting I think, I cannot see any practical use of "g", "y", "m" in forms (I can be wrong). Anyway, I agree with @missmatsuko , this feature breaks HTML5 compatibility, and this is unacceptable. So, possible solutions are (i) to give up the "i" modifer or (ii) to use a different keyword, e.g. consider "pattern" and "data-pristine-pattern" two different attributes.

[missmatsuko]

Oh yeah, it seems my initial explanation was bad. I thought it was failing because of the delimiters, but it does seem to be the flags. I think the i flag could be replaced with [a-Z] in most cases?

[joemottershaw]

I'm not sure if this is a related issue but I've been having problems with HTML5 patterns and the Pristine pattern data attribute. I'm using the following RegEx with the standard HTML5 pattern attribute:

^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).{6,}$

Working examples of this are here and here.

However, using the HTML5 pattern attribute with Pristine like this:

<input type="password" id="password" name="password" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).{6,}$" required>

Or using the Pristine data-* attribute (with the /'s) like this:

<input type="password" id="password" name="password" data-pristine-pattern="/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).{6,}$/" required>

Both return the error Uncaught TypeError: Cannot read property '1' of null.

I'm assuming this is related? Either that or I'm somehow translating the RegEx incorrectly for Pristines validation function... this is my first time using Pristine, so I wouldn't be surprised if it's the latter.

[missmatsuko]

@joemottershaw I think that might have to do with #11 since your RegEx contains commas, and the error is that same as I got there.

[joemottershaw]

@missmatsuko Just tested this without a comma and you're correct. I guess I can fix this by removing the string length in the RegEx and just use the minlength attribute in conjunction with pattern attribute.

Apologies for side-tracking your issue as this was unrelated, but I appreciate the help.

[sha256]

@missmatsuko, I went back to see if HTML5 pattern can be applied here. But turns out, all backslashes must be escaped. So it's going to be different than HTML5 style either way. I agree, the flags are mostly useless here. Also I could not find a way to keep it backward compatible as well.