Tutorial 14: Form Validation in AngularJS

In AngularJS by Hafiz Faraz12 Comments

Lets see how we can add form validation in angularjs application. We will be making use of our exisiting guitar application which we have been working in  Tutorial 13: Tabs in AngularJS . You can download previous tutorial complete app here. This tutorial is somehow little bit similar to Tutorial 8: data binding tutorial that we saw earlier. So to start angularjs form validation, open the details.html page in project files. Details.html file contain details of each guitar plus some tabs. We have to work under reviews tab, where we will be adding some reviews to the guitar details using form validation.

First

update the data.json file, because I have added some new entries to guitar:

As you can see, in each guitar there are now nested reviews in each guitar item. That pretty much it, just added some more data.

Second

We know that where our review tab content is. If you don’t know, it is in details.html file here :

Lets replace this with following code in our review tab for angularjs form validation example to work like this:

Code Explanation:

Line 2:  ng-show says, show this div only when isSelected === 3 (It is explained in previous tutorial). Next, associated this div with ReviewController and gave it an alias of reviewCtrl (will define it shortly in controllers.js file) Line 5: ng-repeat is different here than the one we used earlier, if you goto data.json file and look for reviews you will find out that it is nested inside each guitar. In easy words, for each guitar in data.json there are multiple reviews. So it says, for each guitar’s review in reviews array, show the data where it requires. Line 10: this div is only visible when add review is clicked. when add review is clicked, add value is set to 1 and it becomes visible. Line 20: here I defined the form name because I want to validate the form using its name and angularjs built in $valid magic keyword. And also on submission of form I want to goto a function with information  of current/selected guitar I am on. Next, I don’t want my html to validate form for me, since I am interested in validating it through angularjs way using $valid. Finally, I want it to be visible only when anchor tag above is clicked and its value is set to 1. Line 24: defined ng-model, because I want my input to appear directly in new review tab as soon as I type (line 11). Next, in select tag instead of typing in 5 options I used a simple trick of ng-option to put necessary options into select. Thats it. Lets run it in firefox. Goto details page then review then click on add review…

Third

One more thing is, you need to update style.css file too. Download and replace the existing file with this one: styles.css (updated) If you open the new styles.css file and goto end of it you will find some css styles like this:

These class styles are added by angularjs validation to form when we insert that $valid keyword to our form. Also notice that these styles don’t have space in them, this is because we are saying add style to that element which has both of these classes in it. ng-invalid means when for example wrong email format is insert it will highlight it with red border. ng-dirty is activated once we write something opposite of it is ng-prestine.

Finally

We are going to make our controller in controllers.js file at the end like this:

Code Explanation:

Line 2: setting up an empty object here. Line 6: just pushing the guitar review to its review array in data.json So far, I have added some styles in css file and added a controller and some form/stuff in details.html page. Although, this is not fully functional right now (will make it more practical in next tutorial) but some how you know how to do form validation in our angularjs guitar application.

Demo

click on review tab and then click on add review… input something and see what happens also notice that input fields borders are changing. Right now submit button isn’t configured properly, will do it in next tutorial.

Video Tutorial

 

Download Project Files Hope you like it. Please share my work.

next-AngularJS MVCPrevious-Chapter-Button

//

  • Manoj

    woow its wonderfull i will go through this in details later

    • Hafiz Faraz Mukhtar

      Thanks i am making a video tutorial on it too.

  • Shahzad Ashraf

    when is next coming?

    • Hafiz Faraz Mukhtar

      within three days

      • Manoj

        thanks for ur so much help sir

        • Hafiz Faraz Mukhtar

          Welcome. Kindly help this blog grow by sharing it.

          • Manoj

            yes sure i will

  • anuj

    Best tutorial I had ever gone. Thank You SIR…………….

  • Zohar Jackson

    Better to use Angular-validator. Its much cleaner and more flexible than this solution. https://github.com/turinggroup

  • kannan

    hi,
    when i try to push new review its get some error…

    Cannot read property ‘push’ of undefined