Jquery 投稿二 forms

Question

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

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

Html：

<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>

js:

<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> 

Answer 1

首先，您没有正确使用label元素。 它需要一个for属性，该属性的值是 label 是“for”的表单元素的id ，或者它需要包装它所针对的元素。

接下来， div元素没有name属性。 只有能够并且将要通过表单提交提交数据的表单域才能有name 。

此外，不需要多个 JQuery document.ready()处理程序。 您可以将文档准备就绪时要运行的所有代码放在单个document.ready()中。 说到 JQuery，除非您需要一些非常特定于 JQuery 验证库的东西，否则常规 HTML 可以做与您正在做的相同的事情，但没有 JQuery。您可以将required属性添加到所需的元素。

并且，您不应该对表单中的多个元素使用相同的name ，但复选框和单选按钮除外，因为它们充当相关选择的组。

至于您的主要问题，只需使用一个form ，但根据需要隐藏其中的部分。 最好使用fieldset元素定义表单的各个部分，这也有助于提高可访问性。

 $(document).ready(function () { $("form[name='form']").validate({ rules: { test1a: "required", test1b: "required", test2a: "required", test2b: "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); $('#first').hide(); $('#second').show(); return false; } }); });

 .hidden { display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script> <form name="form" method="post"> <fieldset id="first"> <legend>First Set of Questions</legend> <input type="text" name="test1a"> <input type="text" name="test1b"> <input type="submit" value="Submit"> </fieldset> <fieldset id="second" class="hidden"> <legend>Second Set of Questions</legend> <input type="" name="test2a"> <input type="" name="test2b"> <input type="text" name="testc"> <input type="text" name="testd"> <input type="submit" value="Submit"> </fieldset> </form>