0

I'm using the following code to add the required attribute to a textarea tag.
HTML:

<label class="setting" data-setting="caption">
        <span class="name">Beschriftung</span>
        <textarea></textarea>
</label>

JavaScript:

jQuery(function(){
       jQuery("label[data-setting='caption']").find("textarea").prop('required',true);
});

https://jsfiddle.net/qp30Ljvo/

When I add an image to a text field in a post wordpress opens the media modal.

When I inspect the media modal with right click -> Inspect I can navigate to the following HTML element.

<label class="setting" data-setting="caption">
        <span class="name">Beschriftung</span>
        <textarea></textarea>
</label>

How can I make my JavaScript code run the jQuery function on the media modal?

media modal

  • 1
    Can you explain what you're trying to do? Should you be setting the caption somewhere in a Gutenberg object model rather than directly on the page? – Rup Aug 28 '19 at 11:38
  • I'm trying to change the element <textarea></textarea> to <textarea required></textarea>. I know the jQuery syntax. I don't know how to access the page which contains the html element. – Michael_H Aug 28 '19 at 11:42
0
(function($){
//since only one label with data-setting='caption' exists, use this selector
    $("[data-setting=caption]").children('textarea').attr('required', true);
    })(jQuery);

I'm more curious as to how adding this would affect anything since these labels are not inside a <form> element?

  • I can't test this, but your probably right. Adding the required attribute might not affect anything. I thought I could make caption a required field by adding the required attribute. – Michael_H Aug 29 '19 at 7:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.