关于form表单提交时required属性失效的问题

博主最近在写一个项目，其中涉及到form表单的提交，某些字段必须为非空，就想着在前端做个简单的校验 required=“required”即可

但实际中却遇到了一些小问题  如下：

这是保存按钮

<button type="button" id="save-btn" class="ui secondary button">保存</button>

这是相关js代码（已经去除无关代码）

$('#save-btn').click(function () {
  $('#blog-form').submit();
});

blog-form是表单id

此时点击保存按钮，不会触发相关字段的required属性

后来查阅相关资料才明白，required只会拦截表单提交，但不会阻拦你点击按钮事件，所以通过button点击触发的form提交是不会被required拦截的。

修改方法如下：

<button type="submit" id="save-btn" onclick="subSave();" class="ui secondary submit button">保存</button>
触发onclick事件

在form表单的最下面添加如下button（不显示）

<input style="display: none;" type="submit" id="sub" value="submit" />

onclick函数：

function subSave(){
    document.getElementById ('sub').click ();
}
触发表单提交事件
这样就可以正常运行required属性了