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