CODEWITHSUNDEEP
djangodjango-formsmedium-editor
Jedidiah
Jedidiah

Reputation: 33

Django form with MediumEditor not honoring required attribute

In Django, I have a TextField called 'description' in a model with null and blank set to False (for server side and client side validation). I'm using forms.ModelForm to pull the field and I'm using forms.Textarea to assign attributes. In the attributes, I'm assigning the medium-editor-textarea class attribute to leverage MediumEditor. This field is working as intended and the MediumEditor js is indeed called so that a user can leverage the MediumEditor wysiwyg in the text area; I also have a script in my form template that initializes a new instance of the MediumEditor class with all elements that have the class 'editable': var editor = new MediumEditor('.editable');. The one problem I'm having is that while the div and textarea both contain the required attribute, this is not prompting on the client side that this field is required when a user submits the form. Rather, I continually get the following error message in the console: An invalid from control with name='description' is not focusable, and this points to the textarea tag. In short, even with the required attributes, the browser prompt that the field cannot be empty is not firing on the client side. Here is the relevant code, trimmed of other fields for readability:

models.py

class AModel(models.Model):
    ...
    description = models.TextField(null=False, blank=False)
    ...

forms.py

class AModelForm(forms.ModelForm):
    required_css_class = 'required'     
    class Meta():
        model = AModel
        fields = (...'description'...)
        labels = {
            ...
            'description':'Description',
            ...
        }
        widgets = {
            ...
            'description': forms.Textarea(attrs={'class':'gls-textarea editable medium-editor-textarea gls-width-1-1 gls-height-small','rows':'5','data-placeholder':'Add a description...','required':'',}),
            ...
        }

html in browser (template output):

<form method="post" enctype="multipart/form-data">
    <input type="hidden" name="csrfmiddlewaretoken" value="123456">
        ...
        <p>
            <label for="id_description" class="required">Description:</label>
            <div class="gls-textarea editable medium-editor-textarea gls-width-1-1 gls-height-small medium-editor-element" id="medium-editor-123456" name="description" cols="40" rows="5" data-placeholder="Add a description..." required="" medium-editor-textarea-id="medium-editor-123456" contenteditable="true" spellcheck="true" data-medium-editor-element="true" role="textbox" aria-multiline="true" data-medium-editor-editor-index="1" medium-editor-index="123456-some-index" data-medium-focused="true"></div>
            <textarea name="description" cols="40" rows="5" class="gls-textarea editable medium-editor-textarea gls-width-1-1 gls-height-small medium-editor-hidden" data-placeholder="Add a description..." required="" id="id_description" medium-editor-textarea-id="medium-editor-123456"></textarea>
        </p>
        ...
        <button class="gls-button gls-button-primary" type="submit">Post This Thing</button>                
</form>

Upvotes: 0

Views: 9

Answers (0)

Related Questions