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

Validate and submit two forms as one jquery

本文关键字：一个 jquery 提交 两个 表单 验证      更新时间：2023-09-26

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按钮后将前两个作为一个进行验证和提交，但由于Accoronal标头<h3>，我无法将它们放入html代码中的一个表单中。第三个面板只是这个例子（现在不需要编码），它是单独的一个。正如您所注意到的，上面链接下的代码只适用于一个表单进行验证。

将隐藏的输入放入一个表单中，并让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();
    }
});

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

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

您必须对输入执行验证检查。您可能需要在输入中添加一个common-to-class，然后使用$（'.commonClass'）.serialize（）；我不确定以上内容将如何与多种形式配合使用。

相关文章：