From f3c224484e70170c0c5ffedcaee97b6097adf92f Mon Sep 17 00:00:00 2001 From: Caitlin Potter Date: Wed, 22 Jan 2014 22:30:20 -0500 Subject: [PATCH] fix(input): use ValidityState to determine validity In browsers where HTML5 constraint validation is (partially) implemented, an invalid number entered into an input[type=number] (for example) input element would be visible to the script context as the empty string. When the required or ngRequired attributes are not used, this results in the invalid state of the input being ignored and considered valid. To address this, a validator which considers the state of the HTML5 ValidityState object is used when available. Closes #4293 Closes #2144 Closes #4857 Closes #5120 Closes #4945 Closes #5500 --- src/ng/directive/input.js | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js index a3547bb1122d..1d72d42de2b4 100644 --- a/src/ng/directive/input.js +++ b/src/ng/directive/input.js @@ -435,7 +435,27 @@ function validate(ctrl, validatorName, validity, value){ return validity ? value : undefined; } + +function validateHtml5(ctrl, validatorName, element) { + var validity = element.prop('validity'); + if (isObject(validity)) { + var validator = function(value) { + // Don't overwrite previous validation, don't consider valueMissing to apply (ng-required can + // perform the required validation) + if (!ctrl.$error[validatorName] && (validity.badInput || validity.customError || + validity.typeMismatch) && !validity.valueMissing) { + ctrl.$setValidity(validatorName, false); + return; + } + return value; + }; + ctrl.$parsers.push(validator); + ctrl.$formatters.push(validator); + } +} + function textInputType(scope, element, attr, ctrl, $sniffer, $browser) { + var validity = element.prop('validity'); // In composition mode, users are still inputing intermediate text buffer, // hold the listener until composition is done. // More about composition events: https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent @@ -463,7 +483,7 @@ function textInputType(scope, element, attr, ctrl, $sniffer, $browser) { value = trim(value); } - if (ctrl.$viewValue !== value) { + if (ctrl.$viewValue !== value || (validity && !value && !validity.valueMissing)) { if (scope.$$phase) { ctrl.$setViewValue(value); } else { @@ -583,6 +603,8 @@ function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) { } }); + validateHtml5(ctrl, 'number', element); + ctrl.$formatters.push(function(value) { return ctrl.$isEmpty(value) ? '' : '' + value; });