Javascript 必须单击表单之外的按钮两次

Question

您好，我在单击按钮时遇到问题。由于某种原因，我在表单之外有一个按钮。单击后，我必须验证表单并继续到下一个选项卡。但现在即使表单有效，我也必须单击按钮两次。现在有什么问题吗？

script.js

<script>
$(document).ready(function () {
$('#step-2-form').submit(function(e)
{
var $as = $(this);
    if($as.valid()){ 
    e.preventDefault();
    $('#dgstoneVariable').edatagrid('reload');
return document.getElementById('n.3').click();  
    }
    if(!$as.valid()){   
    }

});

    $('#step-2-form').validate({
        rules: {
        contactname2field: {
                required: true
            },
            jobtitle2field: {
                required: true
            },
            telephone2field: {
                required: true
            },
            email2field: {
                email: true,
                required: true
            },
            cityfield: {
                required: true
            }
        }
    });
});
</script>

在registration.php中，我在第二个选项卡上有三个选项卡，我的结构如下:

<form class="form-horizontal" id="step-2-form">

</form>

 <form target="upload_target" id="fileupload" method="post" action="<?php echo site_url('upload_file/upload_it'); ?>" enctype="multipart/form-data">
....
....
//Here is a code of file upload. If the user browse and uploads the file then have to click continue button once to move onward. But if the user doesnt upload the files then he has to click the button twice to continue to step 3. (ANY IDEA ...???)
<button id="btnupload" style="padding: 4.5px; float:left;margin-top: 30px;border-radius: 0px;" disabled="disabled" type="submit" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-upload"></span></button>
</form>

<button form="step-2-form" type="submit" class="btn btn-success" id="tab-2-cont">CONTINUE</button>

上面的按钮验证第一个表单，然后继续下一步。由于文件上传表单，我必须将其放在外面。

Answer 1

我建议你处理提交事件

$(document).ready(function () {
    $('#step-2-form').submit(function(e) {  
        var $as = $(this);
        if(!$as.valid()){   
            e.preventDefault();
            // Your error Message
        }
    });
});

要将按钮与您的表单关联，您可以使用 button 的 form 属性

The form element that the button is associated with (its form owner). The value of the attribute must be the id attribute of a element in the same document. If this attribute is not specified, the element must be a descendant of a form element. This attribute enables you to place elements anywhere within a document, not just as descendants of their elements.

所以添加form属性。 您不需要将按钮作为表单元素的后代

<button form="step-2-form" id="tab-2-cont" type="submit" class="btn btn-success">CONTINUE</button>

一本好书HTML5′s New “form” Attribute