каждый внутри этого объекта с помощью 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 можно отправить без нажатия кнопки отправки. Тогда не просто перебираем все .required элементов внутри этого form:.

$(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.