I use this ng-pattern="/^[0-9]{9}$/"in an input box that looks like this:
<input
type="text"
id="company_taxId"
ng-model="company.taxId"
required="required"
class="input ng-scope ng-valid-maxlength ng-valid-minlength ng-dirty ng-valid-required ng-invalid ng-invalid-pattern"
style="width:485px;"
ng-minlength="9"
maxlength="9"
ng-maxlength="9"
ng-pattern="/^[0-9]{9}$/"
placeholder="Ej: 458965879"
tooltip="Ej: 458965879"
wv-def="Ej: 458965879"
tooltip-trigger="focus"
tooltip-placement="right"
wv-cur=""
wv-err="Este valor debería ser un número válido."
wv-req="Este campo es requerido"
wv-min="Este valor debería tener exactamente 9 caracteres"
wv-max="Este valor debería tener exactamente 9 caracteres"
>
If the template fails, for example, if I wrote a letter instead of numbers, the message "Este valor debería ser un número válido" should be triggered, but it does not work, and I can not find where the problem is. Is the template incorrect? What is wrong there?
This is the directive that handles the hint trigger:
app.directive('validated', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.keyup(function(){
parent = $('.tooltip');
target = parent.find('.tooltip-inner');
if( element.hasClass('ng-invalid-required') ){
target.html(attrs.wvReq);
attrs.wvCur = attrs.wvReq;
parent.addClass('error');
}
else if( element.hasClass('ng-invalid-email') ){
target.html(attrs.wvEml);
attrs.wvCur = attrs.wvEml;
parent.addClass('error');
}
else if (element.hasClass('ng-invalid-name-exists')) {
target.html(attrs.wvNam);
attrs.wvCur = attrs.wvNam;
parent.addClass('error');
}
else if( element.hasClass('ng-invalid-minlength') ){
target.html(attrs.wvMin);
attrs.wvCur = attrs.wvMin;
parent.addClass('error');
}
else if( element.hasClass('ng-invalid-maxlength') ){
target.html(attrs.wvMax);
attrs.wvCur = attrs.wvMax;
parent.addClass('error');
}
else if( element.hasClass('ng-invalid') ){
target.html(attrs.wvErr);
attrs.wvCur = attrs.wvErr;
parent.addClass('error');
}
else{
target.html(attrs.wvDef);
attrs.wvCur = attrs.wvDef;
parent.removeClass('error');
}
});
element.focus(function(){
setTimeout(function(){
parent = $('.tooltip');
target = parent.find('.tooltip-inner');
target.html((attrs.wvCur != "" ? attrs.wvCur : attrs.wvDef));
if( attrs.wvCur != attrs.wvDef && attrs.wvCur != "" )
parent.addClass('error');
},5);
});
}
};
});
PS: I use Twitter Bootstrap hint for this
source
share