Проверка нескольких форм с одинаковой функцией в jquery

Question

У меня есть страница, которая содержит ссылку, которая откроет окно (через Bootstrap), которое содержит форму для добавления кредитной карты. На этой странице также есть список кредитных карт с ссылкой на редактирование. Когда это будет нажато, оно откроет окно (через Bootstrap) с помощью формы кредитной карты редактирования.

Для обеих форм есть тег div с именем «errorMsgs» над полями формы, в которые идут сообщения об ошибках. Я хочу проверить формы с помощью той же функции jquery.

Что происходит, так это то, что валидация работает для добавления кредитной карты, а сообщение об ошибке отображается в разделе divMsgs. Однако для формы кредитной карты редактирования проверка работает, но не появляется сообщение. Я подозреваю, что сообщение добавляется в div-раздел «errorMsgs» формы добавления, а не в редактор, потому что они находятся на одной странице.

Мне было интересно, как мне добавить его в тег «errorMsgs» кредитной карты, которую вы сейчас редактируете? Поскольку у клиента может быть более одной кредитной карты в файле, может быть несколько форм кредитной карточки редактирования. Я думал, что все еще могу использовать тот же ID, но передаю текущую форму как «параметр», чтобы он мог идентифицировать правильный тег div, чтобы добавить сообщение, но я не слишком уверен, как это сделать.

Ниже представлена ​​упрощенная версия моего кода: функция

JQuery:

function validateCC(selector) { 
    var form = $(selector); 
    form.validate({ 
     invalidHandler: function(event, validator) { 
     var errors = validator.numberOfInvalids(); 

      if (errors) { 
       var message = ' '; 
       message += '<p>Please correct the following errors:<br />'; 
       message += '<ul>\n'; 
       if (validator.errorList.length > 0) { 
        for (x=0;x<validator.errorList.length;x++) { 
         message += '<li>' + validator.errorList[x].message + '</li>\n'; 
        } 
       } 
       message += '</ul>\n'; 
       message += '&nbsp;</p>\n'; 

       $("#errorMsgs").show(); 
       $("#errorMsgs").addClass("alert-error"); 
       $("#errorMsgs").html(message); 


      } else { 
       $("#errorMsgs").hide(); 
      } 
     }, 
     rules: { 
      customercc_ccnum: { 
       minlength: 12, 
       required: true 
      } 
     }, 
     messages: { 
      customercc_ccnum: { 
       required: "Number is required.", 
       minlength: "Number should have at least 12 characters." 
      } 
     } 
    }); 
} 

$('.ccForm').click (function(){ 
    validateCC('.ccForm'); 
}); 

Добавить форму кредитной карты:

<form name="ccForm" class="ccForm" action="#myself#mcustomercc.add" method="post" id="submitCC"> 

<div class="row"> 
    <div class="span7"> 
     <div id="errorMsgs"></div> 
    </div> 
</div> 

<div class="row"> 
    <div class="control-group"> 
    <div class="span2"><b>Credit Card Number:</b> <b class="mandatory">*</b></div> 
    <div class="span5"> 
     <input type="text" name="customercc_ccnum" 
      size="17" 
      value="" 
      placeholder="Credit Card Number" 
      id="customercc_ccnum" 
     > 
    </div> 

    </div> 
</div> 

<div class="row"> 
    <div class="span7"> 
     <input type="submit" name="addCC" value="Add" /> 
    </div> 
</div> 
</form> 

Изменить форму кредитной карты:

<form name="ccForm" class="ccForm" action="#myself#mcustomercc.update" method="post" id="editCC"> 
<div class="row"> 
    <div class="span7"> 
     <div id="errorMsgs"></div> 
    </div> 
</div> 

<div class="row"> 
    <div class="control-group"> 
    <div class="span2"><b>Credit Card Number:</b> <b class="mandatory">*</b></div> 
    <div class="span5"> 
     <div class="controls"> 
     <input type="text" name="customercc_ccnum" 
      size="17" 
      value="4111111111111111" 
      placeholder="Credit Card Number" 
      id="customercc_ccnum" 
     > 
     </div> 
    </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="control-group"> 
    <div class="span7"> 
     <div class="controls"> 
     <input type="hidden" name="customercc_id" value="87"> 
     <input type="submit" name="editCC" value="Edit" /> 
     </div> 
    </div> 
    </div> 
</div> 
</form> 

A помощь будет оценена!

Джейсон

Answer 1

Ваш код ...

function validateCC(selector) { 
    var form = $(selector); 
    form.validate({ 
     // your options 
    }); 
} 

$('.ccForm').click (function(){ 
    validateCC('.ccForm'); 
}); 

Часть проблемы недоразумение о методе .validate(). Он предназначен только для , инициализирующего плагин на вашей форме ... он не должен вызываться на каждом событии click. Поскольку событие click автоматически захватывается плагином, вам нужно только позвонить .validate() в обработчик события DOM ready, чтобы инициализировать плагин с вашими параметрами.

Однако основная проблема заключается в том, что вы используете селектор, который содержит несколько элементов, таких как класс, методы из этого плагина прикреплены только к первому совпадающему элементу . (Вот почему вы видите, что он работает только с одной формой).

JQuery .each() используется для решения этой проблемы.

$(document).ready(function() {  // DOM ready event 

    $('.ccForm').each(function() { // select each form 
     $(this).validate({   // initialize plugin on each form 
      // your options 
     }); 
    }); 

});