AngularJS with jQuery to validate form submissions

Validate AngularJS forms with jQuery

So the title can be a bit trivial if not bogus because facts are facts, AngularJS can validate by itself. True. The title is actually in reference to using jQuery to check for classes on AngularJS form input fields to trigger web analytics scripts.

Learning Javascript and jQuery is where my journey started. Well, actually it was HTML, but doesn’t really lie within the context of this blog post.

Having recently completed AngularJS courses over at Code Academy and Code School, both of which are free, it came to my attention that there are some pretty cool functionalities built into the framework that will help me in my day job as Web Analytics consultant.

By combining jQuery with AngularJS, it would be possible to validate AngularJS forms for tracking in web analytics tools.

Technical Web Analytics

During most of web analytics projects I have to deal with the technical side of things. It is for this reason, and several others as this blog implies, that I decided to learn how to code.

With web analytics I have been doing many projects with Google Tag Manager and getting my hands dirty with tailored implementations of Google Analytics tracking codes. This involves writing javascript scripts in Google Tag Manager.

While recently working on a project for a client I noticed that they were working with AngularJS. The client needed some custom tracking within their application forms so I decided to work with AngularJS’ FromController to only track valid form submissions.

Validate AngularJS Forms with Classes

It turns out that AngularJS automatically adds/removes classes based on user interactions and input into forms that have the class ngForm. On the AngularJS site we can read the following about the ngForm classes:

CSS classes

  • ng-valid is set if the form is valid.
  • ng-invalid is set if the form is invalid.
  • ng-pristine is set if the form is pristine.
  • ng-dirty is set if the form is dirty.
  • ng-submitted is set if the form was submitted.

Keep in mind that ngAnimate can detect each of these classes when added and removed.

So, let’s translate this into layman’s term.

When a page is loaded form input elements will get the class ng-pristine to indicate that the input field is untouched, still in its original state. After a user interacts with the input field, this class is replaced by ng-dirty.

Now, we cannot validate a submission on those classes, but as the list above shows us AngularJS also works with the classes ng-valid and ng-invalid.

These 2 classes are added/removed based on the input type and the submitted input for that field. In other words, if an input field has the type set to ‘email‘ AngularJS will validate the input of the field. If the input is equal to a valid email address AngularJS will add the class ng-valid. If the input does not equal an email value then AngularJS will add ng-invalid.

Checking for valid fields with jQuery

With this knowledge I wrote a short jQuery script (which I am sure can be optimized) that checked the validity of the required fields when the submit (call-to-action) button of the form was clicked.

if (jQuery('input#currentStreet').hasClass('success') && jQuery('input#currentHousenumber').hasClass('success') && jQuery('input#currentPostalcode').hasClass('success') && jQuery('input#currentTown').hasClass('success')){
dataLayer.push({'event': 'customEventName'});
}

What is missing from the jQuery script is the ‘click’ event listener, that is because this is done using Google Tag Manager’s own built-in event listener.

If all of the jQuery’s IF statements return ‘true’ then a an object {‘event’: ‘customEventName’} is push into the dataLayer array. Google Tag Manager reads this push and activates several events from within its own application that are set to run on the ‘customEventName’ value.

Leave a Reply

Site Footer

Sliding Sidebar

About Dad

About Dad

I am a dad of 4 great kids. I want my kids to grow up and learn how to code because I know that it will give them an advantage later on in life. In order to motivate them to learn how to code I need to lead by example. So, now I am learning how to code and this is my journey.

Social Profiles