单击一个表单提交另一个表单

Question

我有两种形式：

<form action="/demo/" id="form_sample_3" class="form-horizontal" novalidate="novalidate" enctype="multipart/form-data" method="post" accept-charset="utf-8">
    <div style="display:none;">
        <input type="hidden" name="_method" value="POST">
    </div>  

    <div class="form-body">

        <div class="form-group">
            <label class="control-label col-md-3">Name
            </label>
            <div class="col-md-9">
                <div class="input-icon right">
                    <i class="fa"></i>

                    <input name="data[Order][name]" class="form-control required" maxlength="40" type="text" id="OrderName" aria-required="true">                                        </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">Email
                </label>
                <div class="col-md-9">
                    <div class="input-icon right">
                        <i class="fa"></i>
                        <input name="data[Order][email]" class="form-control required" maxlength="40" type="email" id="OrderEmail" aria-required="true"> 
                    </div>
                </div>
            </div>
           <button class="btn green" type="submit">Order</button>
        </div>
    </form>

并且

        <form  id="form_sample_1" class="form-horizontal normalForm">
            <div id="info-container">

            </div>
            <div class="form-group c_name_container">
                <div class="col-md-12">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-envelope"></i>
                        </span>
                        <input type="text" id="c_name"  class="form-control required" placeholder="Type your Name here"/>
                    </div>
                </div>
            </div>

            <div class="form-group c_email_container">
                <div class="col-md-12">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-envelope"></i>
                        </span>
                        <input type="email" name="email" id="c_email" class="form-control required" placeholder="Type your Email Address">
                    </div>
                </div>
            </div>
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-offset-3 col-md-9">
                        <button type="button" id="start_chat" class="btn green">Start Chat</button>
                    </div>
                </div>
            </div>
        </form>

这两个表格在同一页面中。现在，如果我单击“订购”按钮，则会提交开始聊天表单。我在提交之前使用了jquery验证，但奇怪的是我点击一个表单提交另一个表单。有什么问题？或者是否无法在同一页面中使用多个表单？

Jquery我用过：

$(document).ready(function () {
    $(document).on("click", ".modal button[type='submit']", function () {
        var ModalId = $('.modal').attr('id');
        var error = 0;
        var invalidEmail = false;
        $('#info-container').empty();
        $('#' + ModalId + ' .required').each(function () {
            if (!$(this).hasClass('select2-container')) {
                if (!$(this).val()) {
                    error++;
                    $(this).css('border-color', 'red');
                    $(this).parent().find('.required').css('border-color', 'red');
                }
                $(this).bind("change paste keyup", function () {
                    var remainingError = 0;
                    if (!$(this).val()) {
                        $(this).css('border-color', 'red');
                        $(this).parent().find('.required').css('border-color', 'red');
                    }
                    else {
                        $(this).css('border-color', 'green');
                        $(this).parent().find('.required').css('border-color', 'green');
                    }
                    $('#' + ModalId + ' .required').each(function () {
                        if (!$(this).hasClass('select2-container')) {
                            if (!$(this).val()) {
                                remainingError++;
                            }
                        }
                    });
                    var msg = '<p class ="warning_msg"> You did not fill up ' + remainingError + ' required field(s). Fill up these and try again</p>';
                    $('#info-container').empty();
                    if (!remainingError) {

                        $('#' + ModalId + ' .required').each(function () {
                            if ($(this).attr('type') == 'email') {

                                if ($(this).attr('aria-invalid') == 'true') {
                                    invalidEmail = true;
                                    msg = '<p class ="warning_msg">Invalid Email.</p>';
                                }
                                else {
                                    invalidEmail = false;
                                    msg = '<p class ="success_msg">Everything is Okay. Now click on <em>Order</em> button </p>';
                                }
                            }

                        });

                        if (!invalidEmail) {
                            msg = '<p class ="success_msg">Everything is Okay. Now click on  button </p>';
                        }


                    }
                    $('#info-container').append(msg);
                });
            }
        });

        if (error) {
            var msg = '<p class ="warning_msg"> You did not fill up ' + error + ' required field(s). Fill up these and try again</p>';
            $('#info-container').append(msg);
            event.preventDefault();
        }
        else {
            if (!invalidEmail) {
                $('form').unbind('submit').submit();
            }

        }

    });
});