HTML5 pattern in validate.js

[dgrammatiko]

Pull Request for Issue #12857 .

Summary of Changes

HTML5 NATIVE validation is done through pattern="something"
The validate.js is adjusted so if pattern tag exists will take precedence else we fall back to the rules

Testing Instructions

• try adding any of the patterns to a text, email, etc field and see if this works
• use http://html5pattern.com/Names for reference

Add pattern="[a-zA-Z]+" after https://github.com/joomla/joomla-cms/blob/staging/administrator/components/com_content/models/forms/article.xml#L13
Create a new article and try to submit without a title or with title as 87587676 (or anything apart english alphabet letters)

@Fedik @ggppdk @mbabker

---

This change is 

[ralain]

Pretty sure it's not going to work with a regex literal. You might try something like this, instead:

isValid = new RegExp($el.attr('pattern')).test($el.val());

[Fedik]

works good 👍
but I think better to change as @ralain sugested

[ralain]

Looked into this further and as I suspected you can't use a variable in a JavaScript regex literal. The variable itself (not its value) becomes the pattern.

Also, html5 pattern and JS regex are not fully compatible, but it's fixed easily by adding start and end of string, like so:

isValid = new RegExp('^'+$el.attr('pattern')+'$').test($el.val());

[dgrammatiko]

@Fedik @ralain I've pushed the suggested code

[ralain]

I have tested this item ✅ successfully on 73c97f8

HTML5 pattern and JS validation match up perfectly, now. Thanks for this.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/13094.}

[Fedik]

I have tested this item ✅ successfully on 73c97f8

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/13094.}

[gptforjoomla]

Hi, this pull has a problem with unrequired inputs. test: a field that is not required but has pattern to be a number or other . when user not enter value for this input and submit, validation say that field is not correct

[ghost]

@minijoomla is this similar to #18591?