Question

您好，我在按钮点击时遇到问题。由于某种原因，我在表格外面有一个按钮。在点击我必须验证表格，然后进入下一个标签。但即使表单有效，我现在必须单击两次按钮。现在的问题是什么？ Registration-2

的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属性

与按钮关联的表单元素（其表单所有者）。属性的值必须是同一文档中元素的id属性。如果未指定此属性，则该元素必须是表单元素的后代。通过此属性，您可以将元素放置在文档中的任何位置，而不仅仅是元素的后代。

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

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

好读HTML5′s New “form” Attribute

Answer 2

使用.submit（）方法提交表单。

$(document).ready(function () {
    $('#tab-2-cont').click(function() {  
        var $as = $('#step-2-form');
        if($as.valid()){   
            $as.submit();
        }
        else
        {
          // alert("Not valid");
        }

});

Answer 3

首先在表单中放置一个提交按钮。它会触发提交事件。因此，如果您想在提交之前验证数据。防止那个事件。

$(document).ready(function () {
    $('#tab-2-cont').click(function(e) {  
        e.preventDefault();
        var $as = $('#step-2-form');
        if($as.valid()){   
            $as.submit();
        }
        else
        {
          // error messages
        }    
});

您的问题非常不明确，请尝试将此按钮移到表单中。

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

3 个答案: