https://static.aapc.com/aapc/forms.js

1/**
2 * script for controling form hint and error message functionality
3 */
4window.addEventListener("message", (event) => {
5  /**
6   * Returns the parent node of the label, input, and legend
7   *
8   * @param {any} event
9   */
10  const getParentNodeChildren = function (event) {
11    return document.querySelector("form-columns-1")
12      ? event.target.offsetParent.firstElementChild
13      : event.target.parentNode.parentNode;
14  };
15
16  /**
17   * function to toggle the hidden class of the legend and label from the targeted input
18   *
19   * @param {any} event
20   * @param {boolean} isHidden
21   */
22  const toggleHidden = function (event, isHidden = true) {
23    let eventfields, targetLegend, targetLabel;
24    eventfields = getParentNodeChildren(event);
25    targetLegend = eventfields.querySelector(".hs-field-desc");
26    targetLabel = eventfields.querySelector("label");
27    if (isHidden) {
28      targetLegend.classList.remove("!hidden");
29      targetLabel.classList.remove("!hidden");
30    } else {
31      targetLegend.classList.add("!hidden");
32      if (event.target.value == "") {
33        targetLabel.classList.add("!hidden");
34      }
35    }
36  };
37
38  /**
39   * Update the field validation styles
40   *
41   * @param {any} event
42   */
43  const updateValidation = function (event) {
44    let eventfields, targetLabel, errorNode;
45    eventfields = getParentNodeChildren(event);
46    targetLabel = eventfields.querySelector("label");
47    errorNode = eventfields.querySelector(".hs-error-msgs");
48    if (errorNode != null) {
49      targetLabel.classList.add("error");
50    } else {
51      targetLabel.classList.remove("error");
52    }
53  };
54
55  // Makes sure the form has been loaded before scripts are run
56  if (
57    event.data.type === "hsFormCallback" &&
58    event.data.eventName === "onFormReady"
59  ) {
60    let textFields, legendFieldNode, labelFieldNode, isLegend, isAutoCompleted;
61
62    // Get all fields of type text from the hubspot form
63    textFields = document.querySelectorAll(".hs-fieldtype-text");
64    // Iterate over the fields and get legend element
65    for (let i = 0; i < textFields.length; i++) {
66      legendFieldNode = textFields[i].childNodes[1];
67      labelFieldNode = textFields[i].childNodes[0];
68      isAutoCompleted = textFields[i].childNodes[2].querySelector(
69        "input[autocompleted]"
70      );
71      // Check that the current child is the legend
72      isLegend = legendFieldNode.classList.contains("hs-field-desc");
73      // Dynamically add a placeholder
74      textFields[i].querySelector("input").placeholder =
75        labelFieldNode.innerText;
76      //Add hidden class and move the legend / hint to bottom of the field as per design
77      if (isLegend) {
78        legendFieldNode.classList.add("!hidden");
79        textFields[i].appendChild(legendFieldNode);
80      }
81      if (
82        labelFieldNode.nodeName == "LABEL" &&
83        !isAutoCompleted &&
84        textFields[i].querySelector("input").value == ""
85      ) {
86        labelFieldNode.classList.add("!hidden");
87      }
88      //Remove hidden class from target legend when element is focused
89      textFields[i].addEventListener("focusin", (event) => {
90        toggleHidden(event);
91      });
92      //Add hidden class to target legend when element is unfocused
93      textFields[i].addEventListener("focusout", (event) => {
94        toggleHidden(event, false);
95        updateValidation(event);
96      });
97      textFields[i].addEventListener("input", (event) => {
98        updateValidation(event);
99      });
100      // Unhide the label if the browser autocomplete has fired
101      textFields[i].addEventListener("onautocomplete", (event) => {
102        let labelField, inputDiv, autocompletedFields;
103        autocompletedFields = document.querySelectorAll("input[autocompleted]");
104        for (let t = 0; t < autocompletedFields.length; t++) {
105          labelField = autocompletedFields[t].offsetParent.childNodes[0];
106          inputDiv = autocompletedFields[t];
107          if (inputDiv.value != "") {
108            labelField.classList.remove("!hidden");
109          }
110        }
111      });
112    }
113  }
114});