javascript - 带有普通按钮的 HTML5 表单必填字段（不是提交）

Question

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

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

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

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

如何使用普通按钮实现相同的功能？

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

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




});

Answer 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()