ckeditor | <textarea> 标签中的“必需”属性不起作用

Posted 2023-05-07

【中文标题】ckeditor | <textarea> 标签中的“必需”属性不起作用

【英文标题】：ckeditor | the "required" attribute within <textarea> tag is not working

【发布时间】：2018-10-10 13:46:16

【问题描述】：

当使用带有<textarea> 标签的CKEDITOR 时，它不起作用。

 <textarea id="editor1" name="description" class="form-control" cols="10" rows="10" required></textarea>

 <script>
      CKEDITOR.replace('editor1');
 </script>

有什么建议吗？

【参考方案1】：

请看：https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_editor.html#event-required

您需要为 CKEditor 分配一个事件处理程序，以“替换”本机 textarea 元素。

---

如果您正在寻找比标准警报对话框更精美的消息显示方式，请尝试使用notifications。下面是最基本的示例（当您在编辑器为空的情况下按下submit 按钮时，将显示通知）：

var editor = CKEDITOR.replace( 'editor1', 
    language: 'en',
    extraPlugins: 'notification'
);

editor.on( 'required', function( evt ) 
    editor.showNotification( 'This field is required.', 'warning' );
    evt.cancel();
 );

请注意，与文档中所写的相反，notification 插件似乎包含在每个预设中。可以通过Available Plugins的搜索框、online builder的列表框查看。

【讨论】：

我能获得原生 HTML 验证（工具提示之一）吗，因为这会造成混淆（工具提示和警报在同一个表单中）。

我认为您不会显示两条消息，因为当 CKEditor 替换 textarea 它实际上将其设置为 display:none 所以这里不会触发工具提示验证。但是，如果您不想使用警报，可以尝试使用通知。让我更新我的答案。

【参考方案2】：

你可以使用

<script>
function validate() 
    var resultado_validacion=true;
    $("#editor_error").html("");
    var editor_val = CKEDITOR.instances.editor.document.getBody().getChild(0).getText().trim();
    if(!(editor_val.length>0))
        $("#editor_error").html("Se requiere contenido del oficio");
        resultado_validacion=false;
           

    return resultado_validacion;


</script>    
<form  onSubmit="return validate();">