ボタンがフォームタグの外にあるときにjQueryフォームが検証されない

Question

ボタンが<form></form>タグの外側にあるときに、フォームの検証を行うことができないようです。どのように私はこれを達成することができる任意のアイデア？私は技術的な理由のためにそれをフォームの中に置くことはできません（それは、スティッキーなnavbarの中にあります）。

私のHTMLマークアップ：

<form id="frm-shipping" class="frm-shipping" method="post"> 

    <input type="text" name="contact_phone" class="has_validation" 
    placeholder="Contact phone" value="" data-validation="required" 
    data-validation-error-msg="this field is mandatory!" > 

    <input type="text" name="first_name" class="has_validation" 
    placeholder="First Name" value="" data-validation="required" 
    data-validation-error-msg="this field is mandatory!" > 

</form> 

<button class="btn" onclick="nextStep();">Next</button> 

とjQueryコード：私はボタンをクリックすると

function nextStep() 
{ 

    $.validate({  
     form : '#frm-shipping',  
     borderColorOnError:"#FF0000", 
     onError : function() {  
     },  
     onSuccess : function() { 

      var params = $("#frm-shipping").serialize(); 
      // AJAX call here 

     } 
    }); 
} 

、何も起こりません。単純に何:(任意の提案ですか？

Answer 1

あなたはform属性を持つフォームにボタンを割り当てることができません。W3Schools exampleを参照してください。

<button class="btn" form="frm-shipping" onclick="nextStep();">Next</button> 

function nextStep() 
 
{ 
 
    $.validate({  
 
     form : '#frm-shipping',  
 
     borderColorOnError:"#FF0000", 
 
     onError : function() { 
 
      console.log('error') 
 
     },  
 
     onSuccess : function() { 
 
      console.log('te3st') 
 
      var params = $("#frm-shipping").serialize(); 
 
      // AJAX call here 
 

 
     } 
 
    }); 
 
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script> 
 

 

 

 
<form id="frm-shipping" class="frm-shipping" method="post"> 
 

 
    
 
    <input type="text" name="contact_phone" class="has_validation" 
 
    placeholder="Contact phone" value="" data-validation="required" 
 
    data-validation-error-msg="this field is mandatory!" > 
 

 
    <input type="text" name="first_name" class="has_validation" 
 
    placeholder="First Name" value="" data-validation="required" 
 
    data-validation-error-msg="this field is mandatory!" > 
 

 
    
 
    
 
</form> 
 

 
<button class="btn" form='frm-shipping' onclick="nextStep();">Next</button>

Answer 2

この

$('.btn').click(function(){ 
     Validate method 
    });