2

I have some page with some forms.
Each form contains some constraints on fields, like required and more.

I want to display errors on validation only when user interacts with them (UX? => yes).
Indeed, as long as the field is $pristine meaning no touched, no errors should be displayed.

I managed to achieve this requirement with a lot of browsers, except... Internet Explorer (especially IE > 10). Indeed, IE seems to consider all fields as $dirty from the beginning!

Surfing on the web, I found this "fix":

MyMainAppModule.config(['$provide', function ($provide) {
        $provide.decorator('$sniffer', ['$delegate', function ($sniffer) {
            var msie = parseInt((/msie (\d+)/.exec(angular.lowercase(navigator.userAgent)) || [])[1], 10);
            var _hasEvent = $sniffer.hasEvent;
            $sniffer.hasEvent = function (event) {
                if (event === 'input' && msie > 10) {
                    return false;
                }
                _hasEvent.call(this, event);
            };
            return $sniffer;
        }]);

Running it and... wowww IE plays nicely now. Running it then in Safari Mobile (Iphone)...disappointment. Why? Because any typed characters are taking into account AFTER event handlers like $watch etc...leading to a shift between what was expected with what occured. It's a pity since it worked well in Safari Mobile before.

So, the actual dilemma is: to give priority to Safari Mobile or IE :)

Has someone ever experimented this situation in IE? Is there some other "better" fixes that I could implement?

Mik378
  • 21,881
  • 15
  • 82
  • 180
  • have you tried to actually test the HTML5 validation without Angular so you know how it works? I am just curious because I am not that familiar with ng, I do with natively and it works according the SPEC. Just wondering if ng gets in the way. – Chris Love Jan 30 '14 at 01:59
  • @Chris Love Actually, I just noticed that this behaviour was caused by the presence of placeholders within the inputs. IE considers them as plain content, so I just removed them and the whole works without any hacks. – Mik378 Jan 30 '14 at 09:13
  • That is interesting because I use placeholders all the time. When my forms are on a phone for example I hide labels and rely on the placeholders to be the labels. I have not encountered the same problem. Interesting.. – Chris Love Jan 30 '14 at 17:07

1 Answers1

3

RETURN _hasEvent.call(this, event);

Psi
  • 474
  • 4
  • 14
  • THANK YOU :-D, there are so many guys having the snippet posted without the return value and I have recognized it yet by using IE11 and pressing the cross to delete the inputvalue, but was wondering why the ngChange wasn't called. That was because event hasn't returned something. Should be the accepted answer. – Sebastian Jan 28 '15 at 13:20
  • NOTE: the '$sniffer.hasEvent ' code should only be called once in your app, placing it in your directive will cause it to be instantiated every time you directive is called, and cause a memory leak (which was hard to find in my case :) ). – Carl Mar 31 '15 at 13:08