jquery - Javascript have to click button twice which is outside the form -

hi facing problem on button click. have button outside form due reason. on click have validate form , proceed next tab. right have click twice button if form valid. what's issue right now?

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> 

in registration.php have 3 tab on 2nd tab have a structure follows:

<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 code of file upload. if user browse , uploads file have click continue button once move onward. if user doesnt upload files has click button twice continue 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> 

the above button validtes first form , proceeds further. have place outside because of file uploading form.

i suggest handle submit event

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

to associate button can use form attribute of button

the form element button associated (its form owner). value of attribute must id attribute of element in same document. if attribute not specified, element must descendant of form element. attribute enables place elements anywhere within document, not descendants of elements.

so add form attribute. you don't need button descendant of form element

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

a read html5′s new “form” attribute