Question

如果由于某种原因，项目要求单个页面包含多个表单，那么当其中一个表单在其他表单之前提交时，是否有任何错误处理不完整表单的最佳实践？

换句话说，假设我们在一个页面上有两个表单：’myCat’和’myDog’;这些表单有三个输入框：’catName’，’catColor’，’catSpecies’和提交按钮（’myDog’有三个输入框：’dogName’，{{1} }，’dogColor’和它自己的提交按钮）。现在，我们必须为在一个表单上创建一些条目的用户做好准备，但在继续进行另一个表单并提交该表单之前不会提交它。例如，如果用户输入’dogSpecies’的值，然后继续完成所有’catName’条目并提交’myDog’表单，则应该询问用户是否他们也希望保存’myDog’条目。（我认识到这个例子最好用同一形式的两个字段集来解决。我用这个例子作为例子。）

是否有任何关于如何评估不完整表单的示例或建议，并在用户不知不觉地离开或刷新页面作为表单提交结果之前警告用户？

Answer 1

从一个FormData对象中的表单中收集所有信息，验证并提交，以防万一。“

document.getElementById('btnName').onsubmit = function(e){
    e.preventDefault();

    function valid(obj){
        // validation check
        if(){
            return true
        }
        return false
    }

    var fd = new FormData();
    var obj = {},
        frm, fld;
    for (var f = 0; f < document.forms.length; f++) {
        frm = document.forms[f];
        for (var e = 0; e < frm.elements.length; e++) {
            fld = frm.elements[e];
            obj[fld.name] = fld.value;
        }
    };


    if(valid(obj)){
        for (i in obj){
            fd.append(i, obj[i]);
        }
        var xhr = new XMLHttpRequest();
        xhr.open("POST", f.action);
        // 
        xhr.send(fd);
    }else{
        // for example
        alert('something is wrong';)
    }

}

中部的混乱程度较少：

    var obj = {};
    document.forms.forEach(function(frm){
        frm.forEach(function(el){
            obj[el.name] = el.value;
        });
    });

如果离开页面填写表格：在window.onbeforeunload上放置一个活动并询问用户是否想要离开。

检查是否有任何内容进行简单验证：

function anyFilled(){
    var obj = {};
    document.forms.forEach(function(frm){
        frm.forEach(function(el){
            if(el.value)
                //some decoration
                el.style.border = 'solid 2px red';
                return true
        });
    });
    return false
}

Answer 2

FOR AFTER FORM VALIDATION：我要做的一件事是，如果特定字段出现错误，请将该字段的边框颜色更改为红色或者会引起您注意的内容，然后在字段旁边显示错误。这样，用户就知道哪个确切的字段有错误，以及他们可以做些什么来解决它。

Answer 3

致电表格 - 提交myDog表格后进行验证，首先检查myCat表格的空白/其他验证。如果无效，则返回false / show错误消息。

你可以设置一个隐藏字段，如果我的猫表单提交完成，那么在提交myDog表单时设置其值为'1'，检查隐藏字段值/ myCat表单字段，然后显示错误。

单个页面上有多个表单时提交表单的最佳实践

3 个答案: