Not all current browsers seem to support HTML5's required attribute on form fields, so this cannot be relied upon consistently. This should therefore be polyfilled. https://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari documents the behavior for Safari specifically but it's not just that browser lacking this; my testing also had issues with Google's mobile browser.
Below is a variant on the above source that I'm using in a project. Feel free to use this as a foundation if someone chooses to add something for this to core. Note this project has a scope that pretty much excludes browsers with no HTML5 support at all (staring at you, IE8), so this would most likely need to be expanded upon.
/**
* Emulate detection of required form fields in browsers which do not support the `required` attribute
*
* Borrowed from http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari
*/
emulateRequiredFormFields: function () {
var is_chrome = navigator.userAgent.indexOf('Chrome') > -1,
is_chrome_ios = navigator.userAgent.match('CriOS'),
is_explorer = navigator.userAgent.indexOf('MSIE') > -1,
is_firefox = navigator.userAgent.indexOf('Firefox') > -1,
is_safari = navigator.userAgent.indexOf('Safari') > -1,
is_opera = navigator.userAgent.toLowerCase().indexOf('op') > -1,
is_ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (is_chrome && is_safari) {
is_safari = false;
}
if (is_chrome && is_opera) {
is_chrome = false;
}
// Only applies to Safari (desktop and mobile) or Chrome on iOS
if (is_safari || is_ios || is_chrome_ios) {
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
forms[i].noValidate = true;
forms[i].addEventListener('submit', function (event) {
// Prevent submission if checkValidity on the form returns false.
if (!event.target.checkValidity()) {
event.preventDefault();
alert('You are missing required fields to submit this form.');
}
}, false);
}
}
},
Labels |
Added:
?
|
Category | ⇒ | JavaScript |
It'd probably be good to include it in 3.x since it'll still have at least two years of shelf life after 3.7's release.
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2016-12-06 15:44:44 |
Closed_By | ⇒ | brianteeman |
Validate.js is checking always the inputs for required attribute, so as long as the form is using the script things won't break
https://github.com/joomla/joomla-cms/blob/staging/media/system/js/validate-uncompressed.js#L70-L71
But since you mention HTML5 then I have to bring the pattern attribute that needs to be mixed in validation.js
My question here is do we need this for 3.x or tackle it in J4.0?