A form field element should have an id or name attribute in UNA 14.0.0

A form field element should have an id or name attribute

A form field element has neither an id nor a name attribute. This might prevent the browser from correctly autofilling the form.

To fix this issue, add a unique id or name attribute to a form field. This is not strictly needed, but still recommended even if you have an autocomplete attribute on the same element.
Affected Resources

101 resources

Exemple in : modules/boonex/timeline/template/jump_to.html

This warning indicates a problem with certain form input fields lacking the necessary id or name attributes for proper browser handling, accessibility, and autofill. The warning is flagging a total of 101 such instances across the scanned resources, and the file modules/boonex/timeline/template/jump_to.html is provided as an example of where one or more of these instances occur.

Let’s look specifically at the example found within the jump_to.html file. The problematic HTML snippet is located in the block:

<bx_if:show_list>
    <div class="__style_prefix__-jump-to-cnt">
        <bx_text:_bx_timeline_txt_or_jump_to />&nbsp;<bx_repeat:links><bx_if:show_link><a href="javascript:void(0)" onclick="__onclick__" title="__title__">__content__</a></bx_if:show_link><bx_if:show_text>__content__</bx_if:show_text><span class="__style_prefix__-jt-divider">, </span></bx_repeat:links>
    </div>
</bx_if:show_list>
<bx_if:show_calendar>
    <div class="__style_prefix__-jump-to-cnt flex items-center flatpickr">
        <bx_text:_bx_timeline_txt_or_jump_to />
        <div class="bx-form-input-wrapper bx-form-input-wrapper-datetime w-32 mx-2">
            <input class="bx-def-font-inputs bx-form-input-datetime __style_prefix__-jump-to-calendar" type="text" data-input />
        </div>
        <a class="bx-btn __style_prefix__-jump-to-switch" href="javascript:void(0)" onclick="__onclick__" data-toggle><i class="sys-icon calendar-alt"></i></a>
    </div>
</bx_if:show_calendar>

(Specifically, the element within the second div)

Explanation of the Fix for this Example: Adding a unique id and a descriptive name attribute to this input field in jump_to.html is the standard and recommended way to address this specific instance of the issue. The name attribute is used for form submission, while the id attribute is important for accessibility and helps browsers and password managers correctly identify the field for autofill.

Proposed Code Change for the input in jump_to.html: Add id="jumpToDateInput" and name="jumpToDate" (or similar descriptive names) to the input tag:

        <bx_text:_bx_timeline_txt_or_jump_to />
        <div class="bx-form-input-wrapper bx-form-input-wrapper-datetime w-32 mx-2">
            <!-- Proposed change: Add id and name attributes -->
            <input class="bx-def-font-inputs bx-form-input-datetime __style_prefix__-jump-to-calendar" type="text" data-input id="jumpToDateInput" name="jumpToDate" />
        </div>
        <a class="bx-btn __style_prefix__-jump-to-switch" href="javascript:void(0)" onclick="__onclick__" data-toggle><i class="sys-icon calendar-alt"></i></a>

Applying this Specific Fix via SSH using sed (No Backup):

For advanced users who wish to apply this fix to this specific input field in jump_to.html directly via the command line without creating backup files, you can use the sed -i command.

First, connect to your server via SSH and navigate to the root directory of your UNA CMS installation. Replace /path/to/your/una/cms/root with the actual, absolute path on your server where UNA CMS is installed.

cd /path/to/your/una/

Once in the correct directory, use the following commands:

1. Command to Apply the Change (Add id and name) to the input in jump_to.html:

sed -i 's|<input class="bx-def-font-inputs bx-form-input-datetime __style_prefix__-jump-to-calendar" type="text" data-input />|<input class="bx-def-font-inputs bx-form-input-datetime __style_prefix__-jump-to-calendar" type="text" data-input id="jumpToDateInput" name="jumpToDate" />|g' modules/boonex/timeline/template/jump_to.html

2. Command to Revert the Change (Go back to Original) for the input in jump_to.html:

sed -i 's|<input class="bx-def-font-inputs bx-form-input-datetime __style_prefix__-jump-to-calendar" type="text" data-input id="jumpToDateInput" name="jumpToDate" />|<input class="bx-def-font-inputs bx-form-input-datetime __style_prefix__-jump-to-calendar" type="text" data-input />|g' modules/boonex/timeline/template/jump_to.html

WARNING:

Using sed -i without a backup extension means that the original content is overwritten immediately. If the command fails or if you make a mistake, it can potentially corrupt or delete the file without an easy way to recover the previous version from the server itself (unless you have a separate system-level backup). Proceed with extreme caution.

NOTE:

These commands provide a fix for a specific instance of the warning found in the jump_to.html file, which is presented as an example. They are for advanced users only. Do not use this code if you don’t know what you are doing. Addressing the other 100 instances of this warning across the codebase would require identifying them individually in their respective files and applying similar fixes.

Replies (0)