wordpress - mark wp_editor required field in form

I am working on a frontend form for wordpress and I have added wp_editor for text area in my form, below is the code I have added. Is there any way I can mark this field as a Required field just like HTML5 required parameter?

<?php
    $settings = array(
    'wpautop' => false,
    'media_buttons' => true,
    'textarea_rows' => 5,
    'tinymce' => true,
    'teeny' => true,
    'textarea_name' => 'main_Content',
    'quicktags' => false,
    'editor_height' => 300
);

    $content = '';
    $editor_id = 'main_Content';

    wp_editor(stripslashes($content), $editor_id, $settings);
?>

Solutions

The visual editor is not a textarea, it is an iframe, therefor even if you could set an attribute it will do nothing. You can set the attribute on the hidden textarea that will be sent to the server but since it is hidden I am not sure how an alert about it not being filled will be displayed and it might be different between browsers (it is hidden so there is no obvious visual anchor for the display of the alert)

or else

You can add a filter to the editor html

add_filter( 'the_editor', 'add_required_attribute_to_wp_editor', 10, 1 );

function add_required_attribute_to_wp_editor( $editor ) {
    $editor = str_replace( '<textarea', '<textarea required="required"', $editor );
    return $editor;
}

I have done the following successfully for a plug-in that uses several visual editors (only some of which are required) on an Admin Screen.

  1. When creating the editor, add a class that is unique to my plugin and indicates that content is required in this editor.
  2. Hook a function to 'the_editor'.
  3. This function will check if the markup for the editor contains my custom class. If so, it adds the required attribute.

I am able to style the field using

textarea[required]:invalid

and the form generates an error if it is submitted while this field is empty (though I've only tested in Safari 10.1 so far).

Sample code is below (This code was taken from a much larger class). First, an excerpt from the function that builds the editor.

$addlClass = ($required) ? 'my-required-field' : '';
$settings  = array(
  'media_buttons' => false,
  'textarea_name' => $fieldName,
  'editor_class'  => $addlClass
);
wp_editor($cleanFld, $fieldId, $settings);

Then, my hook:

add_action('the_editor', array($this, 'CheckIfEditorFieldIsRequired'));

Finally, that function:

public function CheckIfEditorFieldIsRequired($editorMarkup)
{
  if (stripos($editorMarkup, 'my-required-field') !== false) {
    $editorMarkup = str_replace('<textarea', '<textarea required', $editorMarkup);
  }
  return $editorMarkup;
}

Similar questions

Required form field only if previous field is filled
Intro I'm developing a wordpress website where I have a form. The validation of that form is made using jQuery Inline Form Validation Engine 2.2. I have some radio buttons that have two options Yes/No, followed by a required field that only appears if someone chose "No", to explain why. Something like the following example: 1 - Is "John Matrix" coo...
REQUIRED: The theme must not used the <title> tags. | REQUIRED: The theme must not call to wp_title()
I am getting these three warnings while running the theme-check plugin. REQUIRED: The theme must not used the <title> tags. REQUIRED: The theme must not call to wp_title(). REQUIRED: The <title> tags can only contain a call to wp_title(). Use the wp_title filter to modify the output I am using this in my headers <title></title&...
Remove last punctuation mark form wordpress category list
Below it's my code to show list of categories: This code give me results like this: category1 / category2 / category 3 / But i want to have result without last mark: category1 / category2 / category 3 I know i should use rtrim but i don't know how to do this in this case
jQuery clone form field group add wp_editor() function to the textarea
In CPT metabox I am using wp_editor(). The first one is loading through php function. However, when I clone the form fields via jQuery, it doesn't add wp_editor but simple textarea. So here I found a script which loads wp_editor through javascript. However, when I tried to clone/append the form fields it doesn't load the wp_editor but simple textar...
required field in html form works in chrome but not mobile or ie (done in wordpress)
I am building a form using html in wordpress. The fields that need to be required work in chrome (giving a please fill out this field when the submit button is pressed without information in the field) however it will not work in IE or mobile, it just allows the form to be submitted. Here is a sample of a field Last name: * I dont know whats going ...
Wordpress text editor field required in form
Please help me to fix the below text editor in form with conditional required function via JavaScript or any HTML stuff. I am using wp editor field in front end to upload resume for job seeker. But I want this field required (*) so form will not be submitted until this form blank.

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.