angular regex not validating on input box

Question

Why is my regex not being triggered? The first error message "Please enter the longtitude" is displayed when nothing is entered. If I entered an obviously wrong value for "longtitude" the error message is not displayed.

<div class="row">
    <div class="col span-1-of-3">
        <label for="name">Longtitude</label>
    </div>
    <div class="col span-2-of-3">
        <input type="text" ng-pattern="/^[-+]?(180(\.0+)?|((1[0-7]\d)|([1-9]?\d))(\.\d+)?)$/" ng-model="report.lon" name="lon" id="longtitude" placeholder="Enter the longtitude" required />
    </div>
    <div ng-messages="submitReport.lon.$error" ng-if="submitReport.lon.$dirty">
            <div ng-message="required">Please enter the longtitude</div>
            <div ng-message="lon">Your longtitude is invalid</div>
    </div>
    <div ng-show="submitReport.lon.$error.pattern" ng-if="submitReport.lon.$dirty">
            <div ng-message="required">Please enter the longtitude</div>
            <div ng-message="lon">Your longtitude is invalid</div>
    </div>                                                      
</div>

K Scandrett · Accepted Answer · 2016-12-04 23:02:59Z

2

It works for me: https://plnkr.co/edit/WPjGeylGESDexh7Q6UKJ?p=preview

Also please note your spelling for Longitude is not correct.

Edit

The problem in the code is that

<div ng-message="lon">Your longitude is invalid</div>

should be

<div ng-message="pattern">Your longitude is invalid</div>

edited Dec 4, 2016 at 23:02

answered Oct 11, 2016 at 1:52

K Scandrett

16.6k4 gold badges43 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user1532669 Over a year ago

While yours evaluates to true/false it doesn't show the error messages so you're having the same problem.

K Scandrett Over a year ago

Fair call. I didn't include the script library for ngMessages nor include it in the module's array. I've updated the plunk so it works fully

user1532669 Over a year ago

How very odd. So far I can only get the message to show if I do <div ng-show="submitReport.lon.$valid == false">Your longitude is invalid</div> there's nothing odd in the controller, just a couple of functions. The form name is correct too. I'll think about it for a bit longer before posting any more code.

K Scandrett Over a year ago

Have you included the ngMessages library in the module - angular.module('ngPatternExample', ['ngMessages'])? It sounds like the library isn't running at all if you have to use ng-show. That's is core Angular

K Scandrett Over a year ago

And linked to the separate <script> library in the HTML head?

|

Collectives™ on Stack Overflow

angular regex not validating on input box

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related