關於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屬性了