0

I want to add HTML5 required for the client side validation on textarea generated by

<?php
    $content = '';
    $editor_id = 'YOURID';
    wp_editor( $content, $editor_id );
?>

What is the best way to add required on textarea? Thank you.

0

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)

  • Thank you for the explanation. That made things clear for me. Any work around for this? I tried jquery validate plugin but didn't work out either. – Ohsik Nov 24 '15 at 4:45
  • @Ohsik You can always check the content of the text area on form onsubmit (or similar) event and make your own popup message. – Mark Kaplun Nov 24 '15 at 5:06
  • Thank you for the answer. I'm using jQuery validate plugin and couldn't find a way to make this work. Any suggestions? – Ohsik Nov 25 '15 at 2:58
  • sorry but those are details that I don't usually look for and remember (For similar problems I would just say that the effort do not justify the result as you still should handle on server side the case where that field in empty) – Mark Kaplun Nov 25 '15 at 3:02
0

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 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;
}

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.