?
avatar mbabker
mbabker
10 Nov 2016

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);
        }
    }
},
avatar mbabker mbabker - open - 10 Nov 2016
avatar joomla-cms-bot joomla-cms-bot - change - 10 Nov 2016
Labels Added: ?
avatar dgt41
dgt41 - comment - 10 Nov 2016

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

            // If the field is required make sure it has a value
            if ($el.getAttribute('required') || $el.classList.contains('required')) {

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?

avatar brianteeman brianteeman - change - 11 Nov 2016
Category JavaScript
avatar mbabker
mbabker - comment - 11 Nov 2016

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.

avatar brianteeman
brianteeman - comment - 6 Dec 2016

Closed as we have a PR see #13094

avatar brianteeman brianteeman - change - 6 Dec 2016
Status New Closed
Closed_Date 0000-00-00 00:00:00 2016-12-06 15:44:44
Closed_By brianteeman
avatar brianteeman brianteeman - close - 6 Dec 2016

Add a Comment

Login with GitHub to post a comment