Javascript Jquery在两个表单上提交

我有两个表单，一个经过验证，它隐藏并显示下一个表单，然后提交。 然而，通过这样做，它只发布一个表单变量

我提出了一个解决方案，将表单1输入到表单2中的隐藏输入中，但我想知道是否有更好的解决方案，因为我最终会添加更多的输入

Html:

第一组
第二组

js:

$（文档）.ready（函数（）{
$（“form[name='form1']）。验证({
规则：{
testa：“必选”，
testb：“必需”
},
submitHandler:函数（表单）{
//表单提交（）；
警报（'进入下一步…'）；
var value1=$（'input[name=“testa”]'）。val（）；
var value2=$（'input[name=“testb”]”）。val（）；
$（'input[name=“testa”]）.val（value1）；
$（'input[name=“testb”]”）val（value2）；
$（'[name=“div1”]'）。隐藏（）；
$（'[name=“div2”]'）。show（）；
返回false；
}
});
});
$（文档）.ready（函数（）{
$（“form[name='form2']）。验证({
规则：{
testc：“必需”，
testd：“必需”
},
submitHandler:函数（表单）{
警报（“提交”）；
表单提交（）；
}
});
});

首先，您没有正确使用。它需要一个

for

属性，该属性的值是标签为“for”的表单元素的

id

，或者它需要包装它所针对的元素

接下来，

div

元素没有

name

属性。只有能够并将通过表单提交提交其数据的表单字段才能具有

名称

此外，不需要多个JQuery

document.ready（）

处理程序。您可以将文档准备就绪时要运行的所有代码放在单个

文档中。ready（）

。说到JQuery，除非您需要非常特定于JQuery验证库的东西，否则常规HTML可以做与您正在做的相同的事情，但不需要JQuery。您只需将

required

属性添加到所需元素中即可

此外，对于表单中的多个元素，不应使用相同的

名称

，复选框和单选按钮除外，因为它们充当相关选项的组

至于你的主要问题，只需使用一个

表单

，但根据需要隐藏部分。最好使用

fieldset

元素定义表单的部分，这也有助于提高可访问性

$（文档）.ready（函数（）{
$（“form[name='form']）。验证({
规则：{
test1a：“必需”，
test1b：“必需”，
test2a：“必需”，
test2b：“必需”
},
submitHandler:函数（表单）{
//表单提交（）；
警报（'进入下一步…'）；
var value1=$（'input[name=“testa”]'）。val（）；
var value2=$（'input[name=“testb”]”）。val（）；
$（'input[name=“testa”]）.val（value1）；
$（'input[name=“testb”]”）val（value2）；
$（'#first'）.hide（）；
$（“#秒”）.show（）；
返回false；
}
});
});
.hidden{display:none；}

第一组问题
第二组问题
您可以只拥有一个表单，其中包含隐藏的部分，只有在适当的时候才可见。在表单中使用
非常好，不仅可以创建分区并将其作为一个单元进行管理，而且还可以实现可访问性。啊，是的，我从未想过要尝试一下。你能用jquery单独验证字段集吗？请看下面我的工作答案。如果元素没有显示为
display:none
，那么它们就不会参与验证。为什么会被否决？确定并解释了原始问题中的困难，提出了解决问题的替代方法（这就是问题所要求的），并提供了工作代码。否决票：了解否决票的用途。
<div name="div1" style="display:block;">
<label>Div1</label>
    <form name="form1" method="post">
        <input type="text" name="testa">
        <input type="text" name="testb">
        <input type="submit" value="Submit">
    </form>
</div>

<div name="div2" style="display:none;">
<label>Div2</label>
    <form name="form2" method="post">
        <input type="" name="testa">
        <input type="" name="testb">
        <input type="text" name="testc">
        <input type="text" name="testd">
        <input type="submit" value="Submit">
    </form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
  $("form[name='form1']").validate({
    rules: {
      testa: "required",
      testb: "required"
    },
    submitHandler: function(form) {
        //form.submit();
        alert('Going to next step...');
        var value1 = $('input[name="testa"]').val();
        var value2 = $('input[name="testb"]').val();
        $('input[name="testa"]').val(value1);
        $('input[name="testb"]').val(value2);
        $('[name="div1"]').hide();
        $('[name="div2"]').show();
        return false;
    }
  });
});

$(document).ready(function () {
  $("form[name='form2']").validate({
    rules: {
      testc: "required",
      testd: "required"
    },
    submitHandler: function(form) {
        alert('Submitting');
        form.submit();
    }
  });
});
</script>