I have implemented the ng-pattern="/^[0-9]{9}$/" in an input field that appears as follows:
<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="Ex: 458965879"
tooltip="Ex: 458965879"
wv-def="Ex: 458965879"
tooltip-trigger="focus"
tooltip-placement="right"
wv-cur=""
wv-err="This value should be a valid number."
wv-req="This field is required"
wv-min="This value should have exactly 9 characters"
wv-max="This value should have exactly 9 characters"
>
If the pattern fails, for example if I enter letters instead of numbers, the message "This value should be a valid number" should appear, but it's not working and I'm unsure where the issue lies. Is the pattern incorrect? What is wrong here?
This is the directive responsible for handling the tooltip 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(){
//attrs.title = attrs.wvCur;
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: Twitter Bootstrap Tooltip is being used for this functionality