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

Best Practice for form submission when there are multiple forms on a single page

本文关键字：表单 提交 最佳 一个      更新时间：2023-09-26

如果，无论出于何种原因，一个项目要求一个页面包含多个表单，当其中一个表单在其他表单之前提交时，是否存在处理不完整表单错误的最佳实践?

换句话说，假设我们在一个页面上有两个表单:’myCat’和’myDog’;这些表单有三个输入框:’catName’, ’catColor’, ’catSpecies’和一个提交按钮(’myDog’有三个输入框:’dogName’, ’dogColor’, ’dogSpecies’和它自己的提交按钮)。现在，我们必须为这样一种情况做好准备:用户在一个表单上输入了一些条目，但在转到另一个表单并提交之前没有提交。例如，如果用户输入’catName’的值，然后继续完成所有’myDog’条目并提交’myDog’表单，那么似乎应该询问用户是否愿意同时保存’catName’条目。(我认识到这个例子最好是用相同形式的两个字段集来解决。我用这个例子来说明。

是否有任何例子或建议如何评估不完整的表单，并在用户不知情的导航离开或刷新页面之前警告用户，作为表单提交的结果?

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

在提交myDog表单时调用Form - validation，首先检查myCat-Form的空白/其他验证。如果无效，则返回false/显示错误信息。

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

从一个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
}
相关文章：