angular js validation is not performing

Question

I am making a simple html page with validation by angularjs.. I have taken the html file with angularjs by this process

  <title>Student Registration Form</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>

while I am giving the validation in this way

<body ng-app>

and then I am giving the validation in the text area like this code

 <input type="text" name="First_Name" maxlength="30" ng-pattern="/^[a-zA-Z\s]*$/"/>

this ng pattern refers that only alphabets and blank space could be entered

but the error is the validation is not happening.

dfsq · Accepted Answer · 2015-08-24 10:58:43Z

1

There is no validation because input field has no model bound, so no data to validate. Add ngModel directive and it should work:

<input type="text" name="First_Name" ng-model="user.firstName" maxlength="30" ng-pattern="/^[a-zA-Z\s]*$/" />

answered Aug 24, 2015 at 10:58

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

dfsq Over a year ago

If you want validation or use data later in controller, then yes.

dfsq Over a year ago

You will be able to type of course. ngPattern is not the way to prevent incorrect input, it's about validating it. So if you want to block input you need to use ngKeypress and prevent event default if character is not allowed.

Mathias F · Accepted Answer · 2015-08-24 11:13:07Z

0

You can output the validation state by reading .$valid of the field

<body ng-app  >

<div >
  <form name="myForm">
    <label>
       User name:
       <input type="text" name="userName" ng-model="userName"  ng-pattern="/^[a-zA-Z\s]*$/" >
    </label>
      <div>
user: {{userName}}
   </div>

  </form>
  <hr>

  <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br/>

</div>
</body>

http://plnkr.co/edit/lml1eBqEkvCBpz2kb51Z?p=preview

answered Aug 24, 2015 at 11:13

Mathias F

16k25 gold badges95 silver badges167 bronze badges

Collectives™ on Stack Overflow

angular js validation is not performing

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related