I would really like to use native html5 validation for some simple forms served using Google Apps HtmlService.
<form><input type="text" pattern="[0-9]{6}" /><input type="submit" value="try it" /></form>
In jsfiddle the form works as expected: An input not matching six digits results in a validation prompt that is browser specific. However the exact same code served from Google Apps using HtmlService:
function doGet() {
return HtmlService.createHtmlOutput('<form><input type="text" pattern="[0-9]{6}" /><input type="submit" value="try it" /></form>');
}
results in the form showing correctly, but no validation on the input. It can be tested here. I have also tried setting the pattern attribute using a script; this also failed.
The browser used in each case was the same, with the positive result on jsfiddle proving that the browser correctly supports the pattern attribute.
Any help will be greatly appreciated!
You've been Caja'd. From HTML Service Restrictions Doc
To protect users from being served malicious HTML or JavaScript, Apps Script relies on the Caja Compiler to sanitize and sandbox HTML-service web apps or custom user interfaces for Google Docs, Sheets, and Forms.
When you look at the browser source for your web app the Caja compiler turns the form field into:
<input type="text" data-caja-pattern="[0-9]{6}">
the data-caja prefix preventing the browser detecting the pattern.
According to this SO response HTML5 support has been added to Caja so it might be worth filing a bug report