javascript - 在JSP页面中使用jquery通过一个提交按钮验证两个表单

Question

这是我的代码

$(document).ready(function(){
    $("form#one").validate({  // initialize form validation on form 1
        // rules & other options
        messages: {
            input1: "salam"
        },
        errorPlacement: function(error, element) {
            element.focus(function () {
                $("#msg_required").html(error);
            }).blur(function () {
                $("#msg_required").html('');
            });
        }
    });
    $("form#two").validate({ // initialize form validation on form 2
        // rules & other options,
        messages: {
            input2: "bah"
        },
        errorPlacement: function(error, element) {
            element.focus(function () {
                $("#msg_required").html(error);
            }).blur(function () {
                $("#msg_required").html('');
            }); // default error placement
        },
        submitHandler: function(form) {
            if ($("form#one").valid()) {  // test to see if form 1 is valid
                $( "form#two" ).submit();
            }
            return false;
        }
    });
});

<!-- FORM #1: -->
<br/>
<form action="#" id="one">
    <input type="text" name="input1" class="required" />
</form>

<!-- FORM #2: -->
<br/>
<form action="#" id="two">
    <input type="text" name="input2" class="required" />
    <br />
    <span dir="rtl" id="msg_required" class="msg_required"></span>
    <br /><br />
    <input type="submit" />
</form>

当我提交表单二时，不会显示表单一的错误消息。
(包括 jQuery_Validation_Plugin_1.9.0.js 和 jquery-1.9.1.js)

Answer 1

无法显示 Form 1 错误，因为单击提交按钮时未提交该错误。您应该像这样运行代码:

$("#submit_btn").on('click' function (){
    //run your from submission here
})

    <br/>
    <form action="#" id="one">
        <input type="text" name="input1" class="required" />
    </form>

    <!-- FORM #2: -->
    <br/>
    <form action="#" id="two">
        <input type="text" name="input2" class="required" />
        <br />
        <span dir="rtl" id="msg_required" class="msg_required"></span>
        <br /><br />
    </form>

    <!--place the submit button here-->
    <button id="submit_btn">submit</button>

现在创建一个函数，单击按钮即可提交 2 个表单