Custom ID doesn’t work when JS is disabled

Hello,

As stated in the title, I have noticed a bug that affects the functionality of the Custom ID when JavaScript is disabled for the front end (WPCF7_LOAD_JS set to false).

After a validation error, the custom ID disappears from the page’s HTML, making the “screen reader response” unusable.

Steps to Reproduce on a Fresh Install:

1. Customize the form by adding the id option. Ensure that each element has a unique id value.

Sample code:

<label for="test-id-name">Your name (required)</label>
[text* your-name id:test-id-name] 

The resulting HTML, inside the form tag, will be something similar to:

<label for="test-id-name">Your name (required)</label>
<span class="wpcf7-form-control-wrap" data-name="your-name">
<input size="40" maxlength="400" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="test-id-name" aria-required="true" aria-invalid="false" value="" type="text" name="your-name" />
</span> 

2. in wp-config.php, set the WPCF7_LOAD_JS constant to false

define ( 'WPCF7_LOAD_JS', false );

In my test installation, WPCF7_LOAD_CSS and WPCF7_AUTOP are also set to false. This is just to make the final output more evident and has no effect on the custom ID issue.

3. Leave at least one required field empty to trigger an error message, then attempt to submit the form. Afterward, check the HTML again.

Espected result: all custom IDs will be missing.

For example:

HTML before the error:

<label for="test-id-name">Your name (required)</label>
<span class="wpcf7-form-control-wrap" data-name="your-name">
<input size="40" maxlength="400" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="test-id-name" aria-required="true" aria-invalid="false" value="" type="text" name="your-name" />
</span> 

HTML after the error:

<label for="test-id-name">Your name (required)</label>
<span class="wpcf7-form-control-wrap" data-name="your-name"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" aria-describedby="wpcf7-f25-p9-o1-ve-your-name" value="" type="text" name="your-name">
<span class="wpcf7-not-valid-tip" aria-hidden="true">Please fill out this field.</span>
</span>

Is there a way to solve the problem?

Thank you!

• This topic was modified 1 week, 5 days ago by Str3lla.
• This topic was modified 1 week, 5 days ago by Steven Stern (sterndata).

The page I need help with: [log in to see the link]