Angularjs form validation not working

Question

A simple angularjs form validation is not working in any of the browsers. I am using Netbeans 8.0.2 IDE. I am not sure what is the problem. Is there any thing wrong in the code?

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Number only</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script>
            angular.module('myApp', []).controller("numOnlyRegex", function ($scope)
            {
                $scope.numOnlyRegex = /^\d+$/;
            });
        </script>

    </head>
    <body>
        <div ng-app="myApp" ng-controller="numOnlyRegex">
            <form name="myForm">
                Pin:<input type="text" ng-model="pin" ng-pattern="numOnlyRegex" name="pin" /><br/>
                <input type="Submit" value="Submit" />
            </form>
        </div>
    </body>
</html>

Hey i checked it working perfectly :) Here is plunker "plnkr.co/edit/Fni3pDdOvYA8B7IpRCzD?p=preview" — squiroid
– squiroid, Commented Jun 12, 2015 at 6:33
But I am able to type letters in the input field in the plunker — kittu
– kittu, Commented Jun 12, 2015 at 6:38
Or atleast before submitting I want to check if the user typed in is only numbers or throw error message. Also the error message in the span tag keeps displaying even after entering correct value — kittu
– kittu, Commented Jun 12, 2015 at 6:39
This will validate in the way that it will set the form validity to invalid whne you type in letters in the input field but it won't stop you from typing in letters. If you want to do that then you'd need to intercept a keyup event for example where you can check for every character if it is a number — Robin-Hoodie
– Robin-Hoodie, Commented Jun 12, 2015 at 6:40
@kittu No, but you can prevent him from doing so, for example by calling a method through ng-submit and checking for the forms validity there — Robin-Hoodie
– Robin-Hoodie, Commented Jun 12, 2015 at 6:53

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

Your code is fine. You just need to disable the submit button on invalid input!

 <input type="Submit" ng-disabled="myForm.$invalid"  value="Submit" />

Here's the plunkr

Hope it helps!

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 12, 2015 at 6:47

nalinc

7,43327 silver badges34 bronze badges

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

6 Comments

kittu Over a year ago

Thanks NLN and also Along with disabling the button,how can I show a error message below input text box if the user enters letters?

Robin-Hoodie Over a year ago

@kittu add a span containing an error message that you will conditionally show (with ng-show for example) when the input control is $invalid

nalinc Over a year ago

@kittu: You just need to add a span for that and use ng-show directive to display error message.

nalinc Over a year ago

@kittu: Here's the updated plunkr

kittu Over a year ago

The form is not getting disabled for the digit only input(i.e. pincode/zipcode). Please check the plunkr plnkr.co/edit/nMyfgV9kfyza1ErcpF7N?p=preview

|

Collectives™ on Stack Overflow

Angularjs form validation not working

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related