的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我有第二标签的三个选项卡我有AA结构如下：

<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> 

上述按钮validtes第一形式然后进一步进行。由于文件上传表单，我必须将其放在外面。

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（）mehtod提交表单。

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

你的问题很不清楚，试试这个移动你的按钮在你的窗体中。