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

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

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

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




});

Answer 3

这是怎么回事？

$("#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()

循环显示空白字段

Answer 4

您可以使用表单提交事件并使用e.preventDefault();

阻止默认行为（发布到服务器）

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

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

4 个答案: