HTML5 validation errors

[9mido]

https://github.com/mbi/django-simple-captcha/blob/master/captcha/templates/captcha/hidden_field.html

https://github.com/mbi/django-simple-captcha/blob/master/captcha/templates/captcha/field.html

https://github.com/mbi/django-simple-captcha/blob/master/captcha/templates/captcha/text_field.html

input type="hidden" produces HTML5 validation errors when using:

placeholder
required

input type="text" produces HTML5 validation errors when using:

autocorrect

Is there an alternative to make the captcha input tags HTML5 valid?

I am using https://django-simple-captcha.readthedocs.io/en/latest/advanced.html#rendering if that helps.

Attribute autocorrect not allowed on element input at this point.
<input type="text" name="captcha_1" class="form-control mt-2" placeholder="Solve the captcha" required id="id_captcha_1" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false"></p>
​
Attribute required not allowed on element input at this point.
<input type="hidden" name="captcha_0" value="e83b1ca0e5149574b9b19098074dd3de390b339f" class="form-control mt-2" placeholder="Solve the captcha" required id="id_captcha_0">
​
Attribute placeholder is only allowed when the input type is email, number, password, search, tel, text, or url.
<input type="hidden" name="captcha_0" value="e83b1ca0e5149574b9b19098074dd3de390b339f" class="form-control mt-2" placeholder="Solve the captcha" required id="id_captcha_0">

Forms.py:
​
class CustomCaptchaTextInput(CaptchaTextInput):
    template_name = 'custom_field.html'
​
class Form(forms.Form):
	captcha = CaptchaField(widget=CustomCaptchaTextInput)
​
	def __init__(self, *args, **kwargs):
		super(Form, self).__init__(*args, **kwargs)
		self.fields['captcha'].widget.attrs['class'] = 'form-control mt-2'
		self.fields['captcha'].widget.attrs['placeholder'] = 'Solve the captcha'
		self.fields['captcha'].label = "Captcha"
​
​
-------------------------------
custom_field.html:
​
{% load i18n %}
{% spaceless %}
​
  <label class="control-label">{{ label }}</label>
        <img src="{{ image }}" alt="captcha" class="captcha" />
<br/>
<audio class="w-100 mt-2" controls>
  <source src="{{ audio }}" />
</audio>
      {% include "django/forms/widgets/multiwidget.html" %}
{% endspaceless %}

Tried using django-widget-tweaks remove_attr which did not work.

Tried overriding the templates in the following places with no effect:

project_name/templates/captcha/
/home/user/.local/share/virtualenvs/project_name/lib/python3.7/site-packages/captcha/templates/captcha/
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,"templates")],
        'APP_DIRS': True,
​
    }
]
 

The problem seems to be because id_captcha_0 and id_captcha_1 are both rendered at the same time in forms.py via the CaptchaField(widget=CustomCaptchaTextInput).

It would be nice to separately edit both of these ids in forms.py somehow or directly in the custom_field.html file. In the custom_field.html file, {{hidden_field}} and {{text_field}} do not work.