摘要：
博主最近在写一个项目，其中涉及到form表单的提交，某些字段必须为非空，就想着在前端做个简单的校验required=“required”即可但实际中却遇到了一些小问题如下：这是保存按钮保存这是相关js代码$.click;blog-form是表单id此时点击保存按钮，不会触发相关字段的required属性后来查阅相关资料才明白，required只会拦截表单提交，但不会阻拦你点击按钮事件，所以通过button点击触发的form提交是不会被required拦截的。
博主最近在写一个项目，其中涉及到form表单的提交，某些字段必须为非空，就想着在前端做个简单的校验 required=“required”即可
但实际中却遇到了一些小问题 如下：
这是保存按钮
<button type="button" class="ui secondary button">保存</button>
这是相关js代码（已经去除无关代码）
$('#save-btn').click(function () {
$('#blog-form').submit();
});
blog-form是表单id
此时点击保存按钮，不会触发相关字段的required属性
后来查阅相关资料才明白，required只会拦截表单提交，但不会阻拦你点击按钮事件，所以通过button点击触发的form提交是不会被required拦截的。
修改方法如下：<button type="submit" onclick="subSave();" class="ui secondary submit button">保存</button>
触发onclick事件
在form表单的最下面添加如下button（不显示）
<input type="submit" value="submit" />
onclick函数：
function subSave(){
document.getElementById ('sub').click ();
}
触发表单提交事件
这样就可以正常运行required属性了