每个这个对象内使用jquery

Question

我有两个具有相同类名的表单。我想检查点击的所有必填字段。 HTML：

<form action="#" id="form_sample_3" class="form-horizontal normalForm1"> 
      <div class="form-group c_name_container"> 
       <div class="col-md-12"> 
        <div class="input-group"> 
         <span class="input-group-addon"> 
          <i class="fa fa-envelope"></i> 
         </span> 
         <input type="text" id="c_name" class="required" placeholder="Type your Name here"/> 
        </div> 
       </div> 
      </div> 
      <div class="form-group c_email_container"> 
       <div class="col-md-12"> 
        <div class="input-group"> 
         <span class="input-group-addon"> 
          <i class="fa fa-envelope"></i> 
         </span> 
         <input type="email" id="c_email" class="required" placeholder="Type your Email Address"> 
        </div> 
       </div> 
      </div> 
      <div class="form-actions"> 
       <div class="row"> 
        <div class="col-md-offset-3 col-md-9"> 
         <button type="button" id="start_chat" class="btn green">Start Chat</button> 
        </div> 
       </div> 
      </div> 
     </form> 

现在，

$(document).on("click", ".normalForm button[type='submit']", function() { 
    // this will refer clicked form having class `normalForm` 
    // Here i want to looping for all .required class. 
    $('.required').each(function(){ 
     // it works fine. but it looping also others .required class of other form in same page. How can I looping only inside my clicked form? 


     }); 
}); 

Answer 1

您应该绑定submit事件form而不是点击提交按钮即可提交form。然后，只需这form内循环对所有.required要素：

$(document).on('submit', '.normalForm', function() { 
    $(this).find('.required').each(function() { 
     /*...*/ 
    }); 
}); 

Answer 2

试试这个：

$('.required', this.form).each(function() { 
    ... 
}; 

Answer 3

我会用：

$(this).closest('form').find('.required').each(...) 

因为this将点击的按钮，而不是形式本身，而this.form是仅HTML5。