Fork me on GitHub

Automatic Angular.js Validation Messages 32

by

TL;DR
DEMO here
SOURCE here

 

To put it bluntly I simply can’t say enough good things about Angular.js. I’ve been using it for the last year or so and have found amazing improvements and productivity not to mention I write way less, way simpler code (and its fun)! Lets talk about one area of Angular in particular that I found room for improvement:

Angular.js Form Validation

Form validation in Angular is also amazingly flexible you can easily create fields and apply validation rules to them:

Above I’ve created the field “firstName” in “exampleForm” so I can now code against “exampleForm.firstName”. This field is marked as having a minimum length of 2 characters.

The magic comes in because Angular.js exposes a rich object model dealing with the form and all fields that live in it. For example I can write something like this to display a validation error message when the field is invalid after the user has started typing with something like this:

What’s the problem then?

Well I’m very grateful that Angular is so flexible with it’s form validation but unfortunately it can end up resulting in a lot of typing and code to maintain in more complicated situations. This is completely understandable because Angular.js is a framework and not an all inclusive solution to all web problems that exist. (It happens to be a damn good solution to most web problems though once you roll your sleeves up though!)

Consider the field/form now has these pretty standard requirements:

  • A message should display if either of these are invalid:
    • First Name is required.
    • First Name must be at least 2 characters long.
  • If the user tries to submit an invalid form and the server call should NOT occur and validation messages should show up
  • If a user has cursor focus on a field and leaves it validation messages should show up. (way too hard to do for this simple example)

Now that sounds a little more complicated… but to be honest pretty much the form validation user story that most places I have worked want.

Unfortunately the simple code above gets a little nastier to implement this just in the HTML (and I didn’t even implement the focus validation either!)

And the associated controller JavaScript file:

And a demo of it in action:

Woah! That’s quite a bit of work to get pretty basic form validation wouldn’t you agree? Also imagine having that ‘boiler plate’ code on every page across an entire application. Ick!

Another way: AngularAgility Form Extensions

45173320

If you remember Morpheus in the first Matrix movie he isn’t messing around. Neither is AngularAgility Form Extensions. Let’s take a look:

For just this HTML:

And this JavaScript:

You can get the same thing (also with field focus tracking!):

Wow! Thats a lot less code!

To recap the above using the “aa-field” directive in just a 1 line of HTML does the following for the First Name field:

  • A message should display if either of these are invalid:
    • First Name is required.
    • First Name must be at least 2 characters long.
  • If the user tries to submit an invalid form and the server call should NOT occur and validation messages should show up
  • If a user has keyboard cursor focus on a field and leaves it validation messages should show up.

It also automatically generates the label for you “First Name *” based on the field that it is bound to. (* because it is required)

Additions to the Form object model

Form Extensions understands that you might want to code against this stuff your self so it also exposes a rich object model tacked on to what Angular.js already provides. Lets take a look…

Screen Shot 2014-01-23 at 10.20.57 PM

  • $aaFormExtensions is tacked onto the existing form object
    • $invalidAttempt: If one was made (fields were invalid and aa-save-form was called) this is marked as true so messages show up
    •  firstName: Each field that is participating in form validation shows up as an object
      • The $element for that field (for future extensions… stay tuned!)
      • Each of the $errorMessages that currently apply to the field. These are automatically generated and change as input is added/removed.
      • $hadFocus: if the field had focus and is invalid this will cause an error to appear automatically

But doesn’t all this auto-generation mean it’s not flexible?

Absolutely not. Form Extensions is designed to be completely customizable. “aa-field” is actually a composition of many directives that are all configurable with a rich defaultable and overriable provider model.

All these directives can be used separately and interchangably and are overriable, defaultable and configurable with providers

Let’s take a look at what calling “aa-field” actually generates:

Let’s explain what all this means and how customizable it is:

Label

  • Was automatically generated because the textbox below had an “aa-label” on it.
  • The label was generated/placed using the defaultLabelStrategy which is customizable and overridable both globally and individually
  • Due to defaultLabelStrategy’s settings:
    • The “aa-label” contents were generated by de-camel-casing the bound ng-model after the last ‘.’ (if any)
    • Since the associated field is required it has a *
    • The “for” was generated automatically since the textbox didn’t have an ID. If it did it would have used it

Textbox

  • ng-model was generated from EXACTLY what was passed to aa-field
  • name is always barBaz if aa-field=”foo.barBaz”
  • aa-label’s contents are generated as explained above in “Label”
  • aa-val-msg creates the validation message block below and automatically generates all the messages based the the applied validation rules
    • It uses the defaultValMsgPlacementStrategy which is overridable on a per instance or global basis
  • class Form Extensions (just like angular) adds additional classes to the element if you want to code you own CSS rules
  • id was automatically generated so that a proper label could be associated

Validation Messages and Placement

  • The defaultValMsgPlacementStrategy places validation messages directly below the field
  • The placement can be wherever you want by adding a new strategy or using  JUST the aa-val-msg-for=”exampleForm.firstName” directive directly
  • Validation messages show up automatically as needed

In Conclusion

I hope you find AngularAgility Form Extensions useful. I know it has already saved me ALOT of time on my professional projects. And lets be honest coding out validation messages and labels isn’t the most fun thing to do in the first place. Stay tuned, much more productivity enhancing extensions coming to AngularAgility in the near future! Feel free to give me a pull if you think of any improvements or let me know if you have any questions. Enjoy!

DEMO here

SOURCE here

32 thoughts on “Automatic Angular.js Validation Messages

  1. Reply http://www./ Dec 25, 2016 5:42 am

    Zune and iPod: Most people compare the Zune to the Touch, but after seeing how slim and surprisingly small and light it is, I consider it to be a rather unique hybrid that combines qualities of both the Touch and the Nano. It’s very colorful and lovely OLED screen is slightly smaller than the touch screen, but the player itself feels quite a bit smaller and lighter. It weighs about 2/3 as much, and is noticeably smaller in width and height, while being just a hair thicker.VA:F [1.6.5_908]please wait…VA:F [1.6.5_908](from 0 votes)

  2. Reply haftpflicht studenten mitversichert Nov 5, 2016 2:18 am

    Не ми е ясно оригиналната статия ли е глупост или превода куца, но не ми е известен биоетанол, който като изгори не отделя въглероден двуокис. Във википедия са показали реакцията и каквото е написано тук е пълна лъжа:“During combustion ethanol reacts with oxygen to produce carbon dioxide, water, and heat: CH3CH2OH + 3 O2 ? 2 CO2 + 3 H2O + heat “

  3. Reply http://www./ Oct 22, 2016 7:40 pm

    Vâng, em cÅ©ng đã làm má»™t vài dá»± án cần đến 2 – 3 phiển bản trên PC, tablet và smartphone rồi NhÆ°ng nhu cầu này chỉ dành cho những khách hàng đầu tÆ° lá»›n về mặt giao diện thôi. Ở Việt Nam thì việc này chÆ°a được quan tâm lắm

  4. Reply Kapri Aug 10, 2016 8:01 am

    The pusarches I make are entirely based on these articles.

  5. Reply Murugavel Jun 25, 2015 11:20 am

    Hi John,
    I am working on a project that needs to display custom error messages from database. I was wondering how to dynamically set new error messages from server/db to “this.validationMessages”? I am unsure if Formconfig can be used to set dynamic messages on this.validationMessages

    I did see intertech.com‘s example, but it does not set a error message from database

    Appreciate your help.

    Great work on this project. Keep it up !!!

  6. Reply Michael Mar 16, 2015 8:28 pm

    My company doesn’t want the messages to dynamically appear/disappear at all. We originally developed a form with Angular validation a while back, but now we are being audited for usability. The screen reader needs to have focus on the input in order to read out the validation message (field and message could be connected using aria-describedBy) but the message only appears when focus moves OFF the input field, and as soon as focus moved to the input field… the message disappears!
    Now the requirements I have been given are to display messages in a div at the top (with tabindex -1) and to set focus to it after submit. I’m currently looking at the best way to do this. It appears I need to unpick the automatic Angular.js validation messages and get rid of them (I’m sure this isn’t really necessary). I’d love a demo showing how to get the validation messages to appear in an error div at the top of the screen after the submit button is pressed!

  7. Reply Josh Aug 26, 2014 2:57 am

    Hi John, Thanks for the awesome library love it.

    I have one questions. How do I remove the label that gets generated?

  8. Reply Rosen Aug 19, 2014 9:25 am

    It looks like the html was erased from my previous post. However I meant just an ordinary input text with aa-label and aa-field on it.

    • Reply John Culviner Aug 26, 2014 8:27 am

      Hey Rosen,

      Sorry for the delayed response. I haven’t used AA with all types of directives out there but the beautify of it is that its completely optional (use it where it works type mentality). Feel free to respond with a plunker of your exact issue and maybe I can make an update to the framework to make it work better with certain types of directives otherwise feel free to not use it with the bootstrap date picker as well if you are having issues.

  9. Reply Rosen Aug 19, 2014 9:23 am

    Whenever a try to set a bootstrap datepicker on a field that has Angular Agility directives it just doesn’t show up when I click on the field (the datepicker). Let’s say I have this textbox:

    If I remove aa-label and aa-field and instead write ng-model=”newPlayer.BirthDate” it’s all working again. What’s up with that?

  10. Reply Jon Samwell Jun 27, 2014 3:39 am

    Very interesting article, I agree with everything you point in that defining error messages in the HTML is mixing markup and logic. I took a different approach to solving this problem by using an ngModel decorator and dynamic validation message and I’ve created my own validation module that does thing in the same sort of way

    • Reply John Culviner Jun 27, 2014 5:07 am

      Sweet, and your website looks ver nice too! Yeah I’ll be interested to see where yours goes or perhaps we should join forces? I wonder if we both have the same features? When I made this 5 months ago or so I was quite surprised nothing like it already existed since it seemed like a no-brainer to me coming from ASP.NET MVC. I looked into decorators too and found them to be a little more confusing than they were worth for me since Angular also fully supports defining multiple directives with the same name (and different priorities even to boot). Nice plugin and website!

      • Reply Jon Samwell Jun 28, 2014 4:23 am

        Hi John,

        Thanks, yes I think joining forces might be the way to go. I have a few more feature ideas for the module like using angular translate to do a custom error message resolver to handle il8n with validation messages etc….

        Give me an email and we can chat about this.

        Like the site by the way some really interesting articles.

  11. Reply Rafael Pol Jun 15, 2014 5:14 pm

    Hi John, Wonderful work!

    How could I find any example using angularAgility.NET library?

    My application stack is as follow:

    On the server side: SQL SERVER->EF->WEB API->ASP .NET MVC (razor templates)

    On the client side: HTML5/CSS3->AngularJS

    I’m looking for a better and easy way to rehuse validations from the server on the client side.

    Thanks in advance.

  12. Reply Skot Feb 15, 2014 10:59 pm

    So what about custom validation? What if I want to make a custom directive how do I wire this up to work with this? Let’s say a unique check on a field? Great work, just would like an example of creating some custom validation.

    • Reply Skot Feb 16, 2014 3:27 pm

      Alright I figured this out. My issue was not adding a key to ngModel.$error to begin with, then I had to add the validationMessages in the aaFormExtensions provider.

      var uniqueDirective = angular.module(‘uniqueDirective’, []);

      uniqueDirective.directive(‘bcUnique’, [‘$http’, function ($http) {
      return {
      restrict: ‘A’,
      require: [‘?ngModel’],
      link: function (scope, element, attrs, controllers, ngModel) {
      controllers[0].$error[‘unique’] = true;
      element.on(‘blur’, function () {

      scope.$apply(function () {
      var httpConfig = { method: ‘GET’, url: ‘api/username/?username=’ + element.val() };
      $http(httpConfig)
      .success(function (data, status, headers, config) {
      controllers[0].$setValidity(‘unique’, data);
      });
      });
      });
      }
      }
      }]);

      .provider(‘aaFormExtensions’, function () {

      this.validationMessages = {
      required: “{0} is required.”,
      email: “The field {0} must be an email.”,
      minlength: “{0} must be at least {1} character(s).”,
      maxlength: “{0} must be less than {1} characters.”,
      min: “{0} must be at least {1}.”,
      max: “{0} must be at most {1}.”,
      pattern: “{0} is invalid.”,
      url: “{0} must be a valid URL.”,
      number: “{0} must be number.”,
      unique: “{0} is not unique.”
      };

      }

      • Reply John Culviner Feb 16, 2014 4:01 pm

        Awesome work! I think I might try to add something like that baked in. I think it might not be a bad plan to have some more stuff in there than what is included with Angular by default. Also check out aa-auto-form-group too I just added it (one line form groups pretty sweet). I will be creating official API docs here soon.

  13. Pingback: JavaScript MN Presentation Links ← johnculviner.com

  14. Reply Ryan Bennick Jan 29, 2014 10:45 am

    John this is great! I have spent a ton of time creating form validations. I am defiantly going to take this for a spin and refactor some exiting forms I have. Great work!

    To Martin’s comment: Perhaps there could be an option to output the validation message in an inline span as opposed to a div.

    • Reply John Culviner Jan 29, 2014 10:50 am

      Awesome! Glad you like what you see so far. I’m using right now on a project and it really is making things go very fast and smoothly. Please let me know any additional feedback you have while you are using it and don’t hesitate to send me any pull requests you might have!

  15. Reply Martin Jan 29, 2014 12:54 am

    Showing validation error below the input field using ng-show is really bad (but common) practice. This will make the whole formular move and jump whenever there is an error and whenever one is fixed.

    • Reply John Culviner Jan 29, 2014 10:48 am

      Hi Martin,

      Good feedback on that. I’ve almost always seen it done this way but I can see that it maybe visually isn’t the best. The awesome part about AngularAgility Form Extensions is that you can completely customize how and where the validation messages are placed (including whatever might be better UX). Please feel free to contribute a new message placement strategy to the repo so the world can use it!

    • Reply Lois Aug 10, 2016 12:06 pm

      That’s a shrewd answer to a tricky qusteion

    • Reply http://webanalytics.host/happygocard.com.tw Oct 11, 2016 12:52 am

      The circle is complete! I had a neighbor in Okinawa who told me he fought the Soviets in Mongolia in 1939. He was in a two-man tank and was shot thru & thru the butt. He, being Okinawan, was a conscript and hated the Japs but *really* hated Russians. Now I know the whole story.

    • Reply audi a1 kfz versicherung Oct 22, 2016 10:13 am

      Donovan from Qatar, August 5, 2012 at 5:24 PM Located amongst exquisite surroundings. Tastefully built near the shore of with superb daytime and nightime views of the lake. From reception to check out staff were excellent. Had a nice feeling while staying here. Great experience. Highly recommended for those seeking a top quality stay with a reasonable price. Hotel has a nice breakfast served on a terrace overlooking the lake. This alone makes the breakfast worthwhile.

    • Reply http://www./ Nov 4, 2016 11:52 am

      Caro JuvenalEm relação ao meu joelho de 70 anos, que "estraguei" a jogar a bola com o meu neto, só melhorei depois de tratamentos de fisioterapia. Há um jovem em Alcobaça chamado Marco que é um mestre.Se precisares telefona para 262 598 239.Um abraço e até breve.JERO

    • Reply http://www./ Nov 15, 2016 2:52 pm

      Science itself is a method of understanding as you mention, but it does not formally prove anything. You indirectly acknowledge this by using theory as an adjective meaning ‘established but not absolute’. This is also somewhat ironic since the concept of a theory is defined by that of science. Further, if our scientific knowledge was complete, if we were all knowing as you put it, then science itself would be obsolete. And yes, there are alternatives, but not if you care for the truth.

    • Reply http://www./ Dec 24, 2016 9:31 am

      I like what you guys are up also. Such clever work and reporting! Keep up the superb works guys I have incorporated you guys to my blogroll. I think it will improve the value of my website .

    • Reply http://www./ Jan 19, 2017 12:59 pm

      Problém je v tom, že sudca si jednoducho nemôže zabezpečovaÅ¥ svoje financie prostriedkami, ktorých prevoditeľnosÅ¥ na iné subjekty by mohla veľmi ľahko ohroziÅ¥ jeho nezávislosÅ¥ – ako napr. vydieranie. Ak si zoberie sudca pôžičku v kamennej banke, nič také mu nehrozí. Nemá jednoducho na výber.

    • Reply kredit annuitaeiten hypothek online Feb 12, 2017 11:35 am

      Tapez votre commentaire Vous pouvez utiliser ces mots-clés HTML : <a> <abbr> <acronym> <b> <blockquote> <cite> <code> <del> <em> <i> <q> <strike> <strong> Inscrivez-vous a notre newsletter !!! Notifiez-moi des commentaires à venir via émail. Vous pouvez aussi sans commenter.

Leave a Reply