https://www.paturnpike.com/ResourcePackages/PATurnpike/assets/src/…/ptc-form-validation.js?package=PATurnpike

1// FOR REFERENCE: https://knowledgebase.progress.com/articles/Article/automatically-add-an-asterisk-next-to-required-form-fields-in-mvc-forms
2// Applies asterisks to all forms that have required set as an attribute on their inputs
3class PtcFormValidation {
4
5    // -----------------------------------------------------------------------------------------------------------------------
6    // #region Public
7    // -----------------------------------------------------------------------------------------------------------------------
8
9    constructor() {
10
11        // -----------------------------------------------------------------------------------------------------------------------
12        // #region Properties
13        // -----------------------------------------------------------------------------------------------------------------------
14
15        // #endregion Properties
16
17        this.addRequiredAsterisks();
18        //this.$ecTitles.click($.proxy(this.onClickEc, this));
19    }
20
21    // #endregion Public
22
23
24    // -----------------------------------------------------------------------------------------------------------------------
25    // #region Private
26    // -----------------------------------------------------------------------------------------------------------------------
27
28    addRequiredAsterisks() {
29
30        // get all forms fields that are required
31        const requiredValidationFields = $("[required='required']");
32        requiredValidationFields.each((index, element) => {
33            const $element = $(element);
34
35            if ($element.is("textarea")) {
36                this.addRequiredAsterisksToSiblingLabel($element);
37                return;
38            }
39
40            if ($element.is("select")) {
41                this.addRequiredAsterisksToSiblingLabel($element);
42                return;
43            }
44
45            const type = $element.attr("type");
46
47            switch (type) {
48                case "text":
49                case "number":
50                case "email":
51                case "tel":
52                    this.addRequiredAsterisksToSiblingLabel($element);
53                    break;
54                case "checkbox":
55                    this.addRequiredAsterisksToParentsStrong($element);
56                    break;
57                default:
58                    break;
59            }
60        });
61
62
63        const requiredValidationFileInputs = $("p[data-sf-role=required-violation-message]");
64        requiredValidationFileInputs.each((index, element) => {
65            const $element = $(element);
66            this.addRequiredAsterisksToSiblingStrong($element);
67        });
68    }
69
70    addRequiredAsterisksToParentsStrong($element) {
71        const parent = $element.parents("[data-sf-role='checkboxes-field-container']");
72        const strong = parent.children("strong");
73        strong.append(this.getRequiredAsterisk());
74    }
75
76    addRequiredAsterisksToSiblingLabel($element) {
77        const label = $element.siblings("label");
78        label.append(this.getRequiredAsterisk());
79    }
80
81    addRequiredAsterisksToSiblingStrong($element) {
82        const strong = $element.siblings("strong");
83        strong.append(this.getRequiredAsterisk());
84    }
85
86    getRequiredAsterisk() {
87        return "<span class='required-field-asterisk'>*</span>";
88    }
89
90    // #endregion Private
91
92}