的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代码中的一个表单中。第三个面板仅用于此示例(现在无需编码),它是单独的面板。如您所见,以上链接下的代码仅适用于一种验证形式。

最佳答案

将隐藏的输入形式为一种形式,并在验证后使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();
    }
});

09-25 17:02
查看更多