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

HTML

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>

$(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');
        },
    });
});

Please visit the link jsfiddle

请访问链接jsfiddle

I got there 3 headers (panels). The first two I would like to validate and submit as one after pressing the OK button, but I can't put them into the one form in the html code because of the accordion header <h3>. The third panel is just for this example (doesn't need to be coded now), it's separate one. As you noticed the code under the above link works only with one form for validation.

我到那里有3个标题（面板）。前两个我想在按下OK按钮后验证并提交为一个，但由于手风琴标题

，我无法将它们放入html代码中的一个表单中。第三个面板仅用于此示例（现在不需要编码），它是独立的。您注意到上述链接下的代码仅适用于一个表单进行验证。

2 个解决方案

#1

Put hidden inputs in one form, and have the OK button copy the values from the inputs of the second form to them after validating.

将隐藏的输入放在一个表单中，然后让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:

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();
    }
});

#2

Write your own handler for the submit. In the handler you can validate your data, get the values from the forms (look at jQuery serialize), then use jQuery's post to send the data. Something like this (not real code, but should get you there)

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

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

You will have to implement the the validation checks for the input. You may need to add a common to class to the input then use $('.commonClass').serialize(); I'm not sure how the above will work with multiple forms.

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

#1