1

This might be a very weird question. I am starting to use AngularJS and I have a question on form validation using AngularJS.

My question is why would I use form validation using AngularJS if I can do the same using jQuery form validation. For last 4 years almost, there has been no forms I could not validate easily using jquery form validation plugin. I WANT to know the benefits of using Angular JS form validation instead of truly tested jquery form validation

Hello Universe
  • 3,248
  • 7
  • 50
  • 86
  • I just depends on a person choice! – xitas Jun 27 '14 at 07:35
  • 1
    Well if as a Senior developer I have to make the choice, what would be the options.. How are these different and what are the pros and cons of either? – Hello Universe Jun 27 '14 at 07:36
  • 1
    Presumably because if you are only using AngularJS, you might not want to drag another framework only for form validation. It's self-contained. If you are using jQuery anyway, you probably could just add the validation plugin. It makes sense for it to be set up this way. I don't know the precise inner workings of each, though, so maybe there are some differences and quirks. However, if _you_ were a senior developer, surely you would be able to read the documentation and do some tests yourself (or instruct your underlings to do it). – VLAZ Jun 27 '14 at 08:01
  • I recommend this for a read: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background?rq=1 – Chris Preston Jun 27 '14 at 08:07

1 Answers1

2

I think the main benefit is the ability to testing and ease of use. Angular approaches form validation declaratively whereas more complex JQuery validation is done via JavaScript. Angular validation falls in line with the way HTML5 elements should be validated and it believes all validation constraints should be declared in the markup rather than in code (which I agree).

The biggest problem (in my opinion) with validation in angular is that while it is good pratice to decalare your validation rules on the element that displays the data I don't believe it is good practice to have to also define your validation messages in markup at the same time.

<form name="signupFrm" novalidate="novalidate">  
  <div classs="form-row">
    <label>Username:</label>
    <input name="username" 
    ng-model="model.username"
    ng-minlength="3"
    ng-maxlength="10"
    required/>
    <div class="errors" 
    ng-show="signupFrm.username.$dirty && signupFrm.username.$invalid">
      <small class="error" ng-show="signupFrm.username.$error.required">Please input a username</small>
      <small class="error" ng-show="signupFrm.username.$error.minlength">Please enter a min length of 3</small>
      <small class="error" ng-show="signupFrm.username.$error.maxlength">Please enter a max length of 10</small>
  </div>
</div>

On large application this quickly becomes unmanageable as well as forcing logic into markup which is never good as it cannot as easily be tested.

However, I would still favour this over JQuery and I have created a angular module angular-auto-validate which seeks to get rid of the need to defined your messages in the markup. It takes the view that while the declarative nature of the angular form validation is great the way you actually show error messages to the user (with expressions) leads to more unmaintainable; code hence this module moves to reduce that complexity in your markup by applying dynamic validation message.

You can find the module here and the angular blog post behind the idea here

Jon
  • 4,295
  • 6
  • 47
  • 56