Question

我正在使用wordpress的前端表单，我在表单中添加了wp_editor文本区域，下面是我添加的代码。有没有什么方法可以将此字段标记为必填字段，就像HTML5必需参数一样？

<?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);
?>

Answer 1

我已经成功完成了以下插件，该插件在管理员屏幕上使用了几个可视化编辑器（只需要其中一些）。

创建编辑器时，添加一个对我的插件唯一的类，并指出此编辑器中需要内容。
将一个函数挂钩到'the_editor'。
此函数将检查编辑器的标记是否包含我的自定义类。如果是，则添加必需的属性。

我可以使用

textarea[required]:invalid

如果在此字段为空时提交表单，则表单会生成错误（尽管到目前为止我只在Safari 10.1中进行了测试）。

示例代码如下（此代码来自更大的类）。首先，摘自构建编辑器的函数。

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

然后，我的钩子：

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

最后，该功能：

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

Answer 2

可视化编辑器不是textarea，它是iframe，即使如此   你可以设置一个它什么都不做的属性。你可以设置   隐藏的textarea上的属性将被发送到服务器但是   因为它是隐藏的，我不确定它是如何警告的   将显示填充，并且浏览器之间可能不同   （它是隐藏的，所以没有明显的视觉锚来显示   警报）

或者

您可以在编辑器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;
}

wordpress - 在表单中标记wp_editor必填字段

2 个答案: