How to validate a form using angularjs

Now days angularjs is the good front-end framework. In this post i will explain how to validate a form using angularjs. Lets create a sinple form and validate using angularjs.

Angularjs form validation

Angular js text box validation using $touched and used ng-show directive to only show the error message. Include angularjs file within head tag of your page. Copy below angularjs file and add in your page.

angularjs-form-validation

Create index.html

I have used $touched directive to validate the textbox. Now create a index.html file and copy paste below code.

< !DOCTYPE html>
<html>
 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body ng-app="">
    <div class="container">
        <h1 class="text-center">How to validate a form using angularjs</h1>
        <h3 class="text-center">Try leaving the input field blank:</h3>
        <form name="myForm" class="form-horizontal">
            <p>Name: <input name="myName" class="form-control" ng-model="myName" required/>
            <span style="color: red;" ng-show="myForm.myName.$touched && myForm.myName.$invalid">Please enter the name.</span>
            </p>

            <p>Email: <input name="email" class="form-control" ng-model="email" required/>
            <span style="color: red;" ng-show="myForm.email.$touched && myForm.email.$invalid">Please enter the email.</span>
            </p>

            <p>Address: <input name="myAddress" class="form-control" ng-model="myAddress" required/>
            <span style="color: red;" ng-show="myForm.myAddress.$touched && myForm.myAddress.$invalid">Please enter the address.</span>
            </p>
        </form>
    </div>
</body>
</html>

< !DOCTYPE html>

<html>

<h1 class="text-center">How to validate a form using angularjs</h1>

<h3 class="text-center">Try leaving the input field blank:</h3>

<span style="color: red;" ng-show="myForm.myName.$touched && myForm.myName.$invalid">Please enter the name.</span>

</p>

<p>Email: <input name="email" class="form-control" ng-model="email" required/>

<span style="color: red;" ng-show="myForm.email.$touched && myForm.email.$invalid">Please enter the email.</span>

</p>

<p>Address: <input name="myAddress" class="form-control" ng-model="myAddress" required/>

<span style="color: red;" ng-show="myForm.myAddress.$touched && myForm.myAddress.$invalid">Please enter the address.</span>

</p>

</form>

</div>

</body>

</html>

See the live demo and then download the complete code from below link.
Live demo Download

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

How to validate a form using angularjs

Angularjs form validation

Create index.html

Recommended Posts:

webmentor