带有普通按钮的 HTML5 表单必填字段（非提交）答案

【问题标题】：HTML5 Form required field with normal button (not Submit)带有普通按钮的 HTML5 表单必填字段（非提交）
【发布时间】：2013-03-10 15:38:18
【问题描述】：

我有一些表单域和一个保存按钮（不是提交类型）。我想实现 HTML5 所需的验证使用

但它似乎只适用于提交按钮，而不适用于普通按钮。

我无法使用提交按钮，因为我的保存按钮上有自定义代码

$("#saveForm").click(function(){
        saveFormData();
        showView('detailsView','editView');
        setFormFieldValues();
    })

我怎样才能用普通按钮达到同样的效果？

【问题讨论】：

标签： javascript html

【解决方案1】：

我认为您可以使用提交按钮。只需像这样在末尾添加 return false ：

$("#saveForm").click(function(){
    saveFormData();
    showView('detailsView','editView');
    setFormFieldValues();
    return false;     //stops the form being submitted
})

【讨论】：

【解决方案2】：

最好将自定义代码添加到表单的提交事件中：

$("form").on("submit",function(event){

    saveFormData();
    showView('detailsView','editView');
    setFormFieldValues();




});

【讨论】：

【解决方案3】：

您可以使用表单提交事件并使用e.preventDefault(); 阻止默认行为（发布到服务器）

$("form").on("submit",function(e){
    e.preventDefault();
    saveFormData();
    showView('detailsView','editView');
    setFormFieldValues();
});

【讨论】：

【解决方案4】：

这是怎么回事？

$("#saveForm").click(function(event){

    var emptyFields = $('input').filter('[required][value=""]');
    if (emptyFields.length === 0) {
       /* valid code here */
    } else {
       /* invalid code here */
       event.preventDefault(); // this stops the click event;
    }
}

您可以使用 emptyFields.each() 循环遍历空字段

【讨论】：

非常感谢......我喜欢这个......唯一的事情这只适用于第一个字段......不适用于我拥有的所有 4 个字段......