使用jQuery插件進行多表單驗證通過onclick提交而無需提交按鈕

Question

我有多個表單，但需要通過jQuery驗證插件進行驗證。當我使用提交按鈕它工作正常，但是當我使用jQuery的點擊功能提交表單時，它只能工作在第一個窗體和其他窗體不工作。

這裏是我的代碼.......

HTML ...

<form class="validateForm"> 
    <div class="form-group has-feedback"> 
     <input id="form-field-9" class="form-control new_stock" name="new_stock" type="text"> 
    </div> 
    <a href="javascript:void(0)" class="btn btn-xs btn-green stock_details" title="Product Stock Update"> 
    <i class="fa fa-edit"></i> 
     Stock Update 
    </a> 
</form> 

我的jQuery ......

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> 
<script> 
    $(function() { 
     var site_url = $('.site_url').val(); 
     var stockUpdateForm = $('.validateForm').each(function(key, form) { 
      $(form).validate({ 
       rules: { 
        new_stock: { 
         required: true, 
         digits:true 
        } 
       }, 
       highlight: function (element) { 
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); 
       }, 
       unhighlight: function (element) { 
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); 
       }, 
       errorElement: 'span', 
       errorClass: 'help-block', 
       errorPlacement: function (error, element) { 
        if (element.parent('.input-group').length) { 
         error.insertAfter(element.parent()); 
        } else { 
         error.insertAfter(element); 
        } 
       } 
      }); 
     }); 
     $('.stock_details').on('click', function() { 
      if(stockUpdateForm.valid()) { 
       // only one form work but another form not working 
      } 
     }) 
    }) 
</script> 

注：當使用提交按鈕它工作正常，但不工作點擊功能

Answer 1

您的代碼...

$('.stock_details').on('click', function() { 
    if(stockUpdateForm.valid()) { .... 

您可以將.valid()方法只重視特定形式或表單元素，但是你stockUpdateForm代表沒有這樣的事情。

試試這個。使用jQuery的$(this)關鍵字，您只能定位圍繞點擊按鈕的相關form。

$('.stock_details').on('click', function() { 
    if($(this).parent('form').valid()) { ....