Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

input number validation is not working #5120

Closed
camilolopes opened this issue Nov 25, 2013 · 6 comments
Closed

input number validation is not working #5120

camilolopes opened this issue Nov 25, 2013 · 6 comments

Comments

@camilolopes
Copy link

hi guys

ng-show="myform.input.$error.number" does not working. I have tested using 1.0.7. my code complete:

 <div ng-show="medform.cnpj.$dirty && medform.cnpj.$invalid">
 <span class="error" ng-show="medform.cnpj.$error.number">my message</span>
                                            </div>
@caitp
Copy link
Contributor

caitp commented Nov 25, 2013

Can you provide an explanation of what you mean by "not working", and perhaps a reproduction of the problem?

@camilolopes
Copy link
Author

@caitp the message in the block in not showed. there is a discuss here http://docs.angularjs.org/api/ng.directive:input.number

step to reproduce

  1. add the validation for your input type="number"
  2. type words
  3. the message in tags is not showed

@caitp
Copy link
Contributor

caitp commented Nov 25, 2013

for input[type=number] (actually, it affects any input type that is validated by the browser) on modern browsers, the value we see in code is actually the empty string, which passes validation because it's not a required field.

you should be able to work around this by using the novalidate attribute on your containing form

I wrote a patch for this a few months ago, it still needs review and probably won't be merged as is --- but I guess it may be possible to work around the browser constraints issue in the future, if we decide to

@camilolopes
Copy link
Author

@caitp I have tested with novalidate but the result was the same, the message was not showed.

<input class="span6" id="cnpj" type="number" name="cnpj" required ng-model="medicalInstitutional.cnpj">
<div >
     <span class="error" ng-show="medicalinstitutionform.cnpj.$number" >CNPJ is invalid</span>
</div>

I have test in last version Chrome and FireFox.

@caitp
Copy link
Contributor

caitp commented Nov 25, 2013

I've just tested novalidate in FF Nightly and it is working as expected (the number is not validated by the browser, and successfully validated by Angular), but yes this does not seem to work in Chrome. Go figure.

Another work around is to set the required attribute, so that the empty string is not considered a valid input. Unfortunately, there isn't much we can do about this without working around the ValidityState issue (see the patch I've linked above)

@petebacondarwin
Copy link
Contributor

@caitp is spot on here. novalidate only affects form submission. The real problem is the ValidityState that modern browsers use and so mess up the value of the input. Closing in favour of #4293

caitp added a commit to caitp/angular.js that referenced this issue Jan 23, 2014
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 angular#4293
Closes angular#2144
Closes angular#4857
Closes angular#5120
Closes angular#4945
Closes angular#5500
caitp added a commit to caitp/angular.js that referenced this issue Jan 23, 2014
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 angular#4293
Closes angular#2144
Closes angular#4857
Closes angular#5120
Closes angular#4945
Closes angular#5500
caitp added a commit to caitp/angular.js that referenced this issue Jan 23, 2014
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 angular#4293
Closes angular#2144
Closes angular#4857
Closes angular#5120
Closes angular#4945
Closes angular#5500
caitp added a commit to caitp/angular.js that referenced this issue Jan 23, 2014
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 angular#4293
Closes angular#2144
Closes angular#4857
Closes angular#5120
Closes angular#4945
Closes angular#5500
caitp added a commit to caitp/angular.js that referenced this issue Feb 21, 2014
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 angular#4293
Closes angular#2144
Closes angular#4857
Closes angular#5120
Closes angular#4945
Closes angular#5500
caitp added a commit to caitp/angular.js that referenced this issue Feb 21, 2014
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 angular#4293
Closes angular#2144
Closes angular#4857
Closes angular#5120
Closes angular#4945
Closes angular#5500
caitp added a commit to caitp/angular.js that referenced this issue Feb 21, 2014
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 angular#4293
Closes angular#2144
Closes angular#4857
Closes angular#5120
Closes angular#4945
Closes angular#5500
caitp added a commit that referenced this issue Feb 21, 2014
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
Closes #5944
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants