jquery - 每个对象内部都使用 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

您应该绑定(bind)form的submit事件，因为可以在不单击提交按钮的情况下提交form。然后简单地循环此 form 内的所有 .required 元素:

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