Question

HTML

<button type="submit" name="save" id="btn"> ok </button>

<div id="acc">
    <h3>First header</h3>
    <form name="form1" id="id_form1" method="post">
        <div><input type="text" id="firstname" name="firstname" required></div>
    </form>
    <h3>Second header</h3>
    <form name="form2" id="id_form2" method="post">
        <div><input type="text" id="lastname" name="lastname" required></div>
    </form>
    <h3>Third header</h3>
    <form name="form3" id="id_form3" method="post">
        <div><input type="text" id="address" name="address" required></div>
        <button type="submit" name="create"> create </button>
    </form>
</div>

JS

$(document).ready(function() {      
    $( "#acc" ).accordion({
        collapsible: true,
        heightStyle: "content",
        active: false
    });

    $('#btn').click(function() {
        $('#id_form1').submit();
    });

    $('#id_form1').validate({
        ignore: "",
        invalidHandler: function(event, validator) {
            alert('ttt');
        },
    });
});

请访问链接jsfiddle

我有3个标题（面板）。前两个我想在按下OK按钮后验证并提交为一个，但由于手风琴标题<h3>，我无法将它们放入html代码中的一个表单中。第三个面板仅用于此示例（现在不需要编码），它是独立的。如您所知，上述链接下的代码仅适用于一个表单进行验证。

Answer 1

将隐藏的输入放在一个表单中，然后让OK按钮在验证后将第二个表单的输入值复制到它们。

<button type="submit" name="save" id="btn"> ok </button>

<div id="acc">
    <h3>First header</h3>
    <form name="form1" id="id_form1" method="post">
        <div><input type="text" id="firstname" name="firstname" required></div>
        <input type="hidden" id="hidden_lastname" name="lastname">
    </form>
    <h3>Second header</h3>
    <form name="form2" id="id_form2" method="post">
        <div><input type="text" id="lastname" name="lastname" required></div>
    </form>
    <h3>Third header</h3>
    <form name="form3" id="id_form3" method="post">
        <div><input type="text" id="address" name="address" required></div>
        <button type="submit" name="create"> create </button>
    </form>
</div>

jQuery的：

$("#btn").click(function() {
    if ($("#id_form1").valid() && $("#id_form2").valid()) {
        $("#id_form2 input").each(function() {
            $("#id_form1 #hidden_" + this.id).value(this.value);
        });
        $("#id_form1").submit();
    }
});

Answer 2

为提交编写自己的处理程序。在处理程序中，您可以验证数据，从表单中获取值（查看jQuery序列化），然后使用jQuery的post发送数据。像这样的东西（不是真正的代码，但应该让你到那里）

$("#btn").click(function(){
    if( input1.isValid() && input2.isValid){
        var formInputSerial = $('form').serialize();
        $.post("http://whereToSendData", formInputSerial, callbackFunction(ifNeeded))
    }
}

您必须实施输入的验证检查。您可能需要在输入中添加一个公共类，然后使用$（'。commonClass'）。serialize（）;我不确定上述内容如何适用于多种形式。

验证并提交两个表单作为一个jquery

2 个答案: