angular / angular.js

AngularJS - HTML enhanced for web apps!
https://angularjs.org
MIT License
58.79k stars 27.48k forks source link

input number validation is not working #5120

Closed camilolopes closed 11 years ago

camilolopes commented 11 years ago

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 commented 11 years ago

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

camilolopes commented 11 years ago

@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 commented 11 years ago

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 commented 11 years ago

@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 commented 11 years ago

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 commented 11 years ago

@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