空的必填字段没有'不要阻止提交表格

empty required field didn't prevent the form from being submitted

本文关键字：表格 提交 字段      更新时间：2023-09-26

这里有一个文本编辑器和一个预览按钮。预览按钮的工作是从编辑器中获取内容，并将其附加在div中，然后创建另一个名为"提交"的按钮。我在这个按钮上附加了一个点击事件，它将提交表单。但问题是，如果我将任何必填字段留空，表单无论如何都会被提交如果我将标题字段留空，表单元素内部的提交按钮将阻止表单提交，但如果所需的标题字段为空，则外部表单提交按钮将提交表单

如何防止这种情况发生？

 <form action='test.php' method='post' id='editorform'>
      <div id='title'>
        <label for='editorTitle' id='foreditorTitle'>Title
             <input type='text' placeholder='Title of the content' id='editorTitle'  autocomplete='off' required>
        </label>
      </div>
      <div id='editordiv'>
            <textarea name="editor1" id="editor1" rows="10" cols="50" required>
                This is my textarea to be replaced with CKEditor.
            </textarea>
      </div>
      <div id='preview'>
            <input type='button' id='previewButton' value='preview' >
      </div>
    </form>
    <div id='content' style='width:750px;position:relative;top:50px;'></div>
     <script>
       CKEDITOR.replace( 'editor1');
                   $("#previewButton").click( function lol(event){
                   var content=$('#content');
                   content.html('');

       var  el=CKEDITOR.instances.editor1.getData();                    
                    var html=$.parseHTML(el);
                    content.append(html);
                    $("<input id='sub' type='button' value='submit'/>").appendTo(content);
                    $(document).on('click','#sub',function(){
                          $("#editorform").submit();
                      });
            });
 </script>

通过.submit()方法提交表单时，不会自动进行验证。

在现代浏览器中，您可以使用有效性API强制进行验证检查。

$(document).on("click", "#sub", function() {
    var form = $("#editorform")[0];
    if (!form.reportValidity || form.reportValidity()) {
        form.submit();
    }
});

!form.reportValidity测试允许这在旧的浏览器上工作，它们将跳过检查。

演示

相关文章：