Jquery - 仅验证多种表单中的一种表单

Question

所以，我浏览了 SO 上的许多线程，但找不到我的相关查询。好吧，我有一个类似于 SO 的网络应用程序，在其中提出问题，人们可以自由地评论/回答问题(也允许对答案进行评论)。

我通过 API 获得特定问题的答案，并形成相应的 HTML 并将其附加到 div 中。我的 HTML 有点像这样:-

<div>
   <p> Some Answer </p>
   <div class="comments"></div>
       <form id="form_62" class="comment_form" method="POST" action="URL"> <!--This id is variable-->
           <textarea rows="3" name="comment"></textarea>
           <button type="submit">Comment </button>
       </form>
    </div>
</div>

因此，我将这样的 HTML 动态附加到某个 div 中。正如您所看到的，可能有很多答案，因此会形成多个评论。

我针对它编写了一个验证器，如下所示:-

$(function(){
    $(document).on('submit', '.comment_form', function(e){
        alert(111)
        form_id = $(this).id
        e.preventDefault();    
        if($(this).valid()){
            $.ajax({
                ...
            });
        }
    })

    $(this).validate({
        ignore: '',
        onsubmit : false,
        rules: {
            comment: {
                required: true,
                minlength: 10
            }
        }
    });
})

这没有按预期工作。

所以，我的问题是如何验证我当前提交的表单？

Answer 1

如果动态添加任何带有表单的 div，则创建一个函数，该函数根据 Id 对表单应用验证，并在动态添加 div 或表单时调用函数。

    function applyValidate(id){
       $(id).validate({
         ignore: '',
         onsubmit : false,
         rules: {
           comment: {
             required: true,
             minlength: 10
           }
         }
      });
   } 

如果所有表单一次加载到页面中，并且您想在每个表单上绑定(bind)验证，那么您可以使用下面的代码。

$(function(){
  $(document).on('submit', '.comment_form', function(e){
    form_id = $(this).id
    e.preventDefault();    
    if($(this).valid()){
      console.log('success')
    }
  });
	
  /* If all forms are not dynamically added and rendered at once in page then you have to apply validate on each form otherwise add applyValidate(id) function outside of $(function(){}); and call applyValidate(id) function when form is dynamically added*/
  
  $('.comment_form').each(function() {  
    // attach to all form elements on page
    $(this).validate({
      ignore: '',
      onsubmit : false,
      rules: {
        comment: {
          required: true,
          minlength: 10
        }
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>


<div>
  <p> Some Answer </p>
  <div class="comments"></div>
  <form id="form_62" class="comment_form" method="POST" action="URL"> <!--This id is variable-->
    <textarea rows="3" name="comment"></textarea>
	<button type="submit">Comment </button>
  </form>
</div>

<div>
  <p> Some Answer </p>
  <div class="comments"></div>
  <form id="form_63" class="comment_form" method="POST" action="URL"> <!--This id is variable-->
    <textarea rows="3" name="comment"></textarea>
	<button type="submit">Comment </button>
  </form>
</div>

<div>
  <p> Some Answer </p>
  <div class="comments"></div>
  <form id="form_64" class="comment_form" method="POST" action="URL"> <!--This id is variable-->
    <textarea rows="3" name="comment"></textarea>
	<button type="submit">Comment </button>
  </form>
</div>