Form Field Error Tracking

[sujay_das]

I have a form in which there are multiple form fields. I want to track the form error which shows for each field and fire corresponding collect tags for Google Analytics. Is there any way on how to do this using javascript/jquery?

I'm not able to think of any solution to this.

[BenStephenson]

Hi @sujay_das

Can you post a sample of the html?

It is possible using javascript or jQuery, and there are a number of ways to do it. It depends on how/when the error messages are shown though. Are they shown on blur of the input element, or on click of the button? Is the validation server side (and therefore with a page refresh) or client side?

A few things to think about:

- can you add a click handler to the submit button that looks for the presence (or visibility) of error messages, collates the messages and then calls utag.view with the data?

- can you add a blur handler to the form elements to post a GA call if that element is at error?

- can you add a mutation observer to the form, or the form error message elements, to watch for changes (either sub-element changes if the error messages are added, or stlye changes if they are made visible)?

All of these approaches are possible in iQ using DOM Ready JavaScript extensions, which one you choose largely depends on the answer to the first question.

[Srinivasan]

Hello sujay_das,

In addition to above cited points from @BenStephenson, please find below code which would really useful for you to capture the error messages when end-user fill the form and got error messages. Basically this code works out if your FORM built in iFrame other wise you can write the straight forward method to capture the anticipated values.

$('input[type=submit], a.button, #iframe input[type=submit]').bind('click', function (e) {
  setTimeout(function () {
    var errorMessages = [];
    $('div.error-msg p').each(function () {
      errorMessages.push($(this).text());
    });
    $('p.error').each(function () {
      errorMessages.push($(this).text());
    });
    $("#iframe").contents().find("p.error").each(function () {
      errorMessages.push($(this).text());
    });
    $("#iframe").contents().find("div.error-msg").each(function () {
      errorMessages.push($(this).text());
    });
    $("div.error-msg").each(function () {
      errorMessages.push($(this).text());
    });
    if (errorMessages.length > 0) {
      console.log("Error Message Found ", errorMessages);
      for (var i = 0, len = errorMessages.length; i < len; i++) {
        if (errorMessages[i].length > 1) {
          window.utag_data['cevent_id'] = "Error: " + errorMessages[i];
          window.utag_data['event_parent'] = "Respective page title";
          window.utag_data['event_type'] = "Respective Error msg";
          utag.link(window.utag_data, null, [9]);
        }
      }
    }
  }, 4000);
});

Note: This is example code which you should change based on your requirement.

Hope it helps! Happy Learning!