CODEWITHSUNDEEP
angularjstwitter-bootstrapvalidationtwitter-bootstrap-3
faizanjehangir
faizanjehangir

Reputation: 2851

validate input field on provided pattern

I have an input field in the bootstrap form which is validate as the user changes the model. I have a feedback help-block with the input field which is to be validated. However, the provided pattern validation is not working. Here is my code:

<div class="form-group" show-errors='{showSuccess: true}'>
                            <label>ID</label>
                            <input class="form-control" type="text" name="programID" ng-model="programID"  pattern="^[A-Z]{2}$"
                                   required>

                            <p class="help-block" ng-style="{'display':conf.display}"
                               ng-if="programID.$error.required">program ID is required</p>
                            <p class="help-block" ng-style="{'display':conf.display}"
                               ng-if="programID.$error.pattern">program ID is invalid</p>
                        </div>

The pattern needs to validate only uppercase letters, strictly 2 in length.. The field is validated against empty, but not for the provided pattern..

Upvotes: 1

Views: 338

Answers (1)

Michel
Michel

Reputation: 28349

Replace:

pattern="^[A-Z]{2}$"

with

ng-pattern="/^[A-Z]{2}$/"

From documentation

If the expression evaluates to a RegExp object, then this is used directly. If the expression evaluates to a string, then it will be converted to a RegExp after wrapping it in ^ and $ characters. For instance, "abc" will be converted to new RegExp('^abc$')

Upvotes: 1

Related Questions