Размещение сообщения об ошибке для массива флажков

Question

Я использую плагин валидации для jQuery, и он творит чудеса. За исключением случаев, когда у меня есть группа флажков ... сообщения об ошибках будут отображаться сразу после первого флажка ... примерно так:

<tbody>
     <c:forEach items="${list}" var="item">
        <tr>
          <td align="center">
             <input type="checkbox" name="selectItems" value="<c:out value="${item.numberPlate}"/>" />
          </td>
          <!--some other columns-->
         </tr>
      </c:forEach>                       
</tbody>

------------------------------ ------------- EDITED ------------

Я обнаружил, что могу использовать errorPlacement , но не знаю, как показать ONLY сообщение об ошибке массива флажков в нижнем колонтитуле таблицы или где-то еще во втором наборе полей .

Надеюсь, вы поможете мне.

Answer 1

Почему бы не использовать пользовательский метод проверки? Примерно так:

JQuery:

// The custom validation method, returns FALSE (invalid) if there are
// no checkboxes (with a .one_required class) checked
$.validator.addMethod("one_required", function() {
    return $("#myform").find(".one_required:checked").length > 0;
}, 'Please select at least one vehicle.');

$("#myform").validate({
    // Use the built-in errorPlacement function to place the error message
    // outside the table holding the checkboxes if they are the ones that
    // didn't validate, otherwise use the default placement.
    errorPlacement: function(error, element) {
        if ($(element).hasClass("one_required")) {
            error.insertAfter($(element).closest("table"));
        } else {
            error.insertAfter(element);
        }
    }
});

HTML:

<form id="myform">
    <!-- table, rows, etc -->
    <td align="center"><input type="checkbox" class="one_required" name="selectItems[]" value="NA245852" /></td>
    <td>NA245852</td>
    <!-- more rows, end table, etc -->
    <br/>
    <input type="submit" value="Go, baby !">
</form>

Поскольку плагин jQuery Validate также может проверять элемент, если имя метода представлено как class, просто выведите класс .one_required для всех флажков.

См. Рабочую демонстрацию для JSFiddle с несколькими флажками.

EDIT:

Здесь - ваш собственный код с реализованным выше решением.

Надеюсь, это поможет!

Answer 2

Вы можете использовать опцию конфигурации errorLabelContainer. Определить div с идентификатором, подобным errorMessages , а затем изменить вызов метода validate следующим образом:

$("form").validate({
   errorLabelContainer: $("#errorMessages"),
     rules: ..... your rules

Теперь все сообщения об ошибках будутотображаться в div. Изменить: Обновленный ответ ниже, чтобы отразить обновления на вопрос: Чтобы изменить расположение отображаемых сообщений об ошибках, я могу использовать параметр конфигурации errorPlacement.Вы можете использовать что-то вроде: Определите div или ap и продолжайте добавлять сообщения для флажков к этому элементу.

$("form").validate({
errorPlacement:function(error,element) {
    if (element.attr("name") == "selectItems") {
        //Add Code to append the error message to a predefined element
        $("#errorDiv").html("");
        $("#errorDiv").append("<YOUR_CUSTOM_MESSAGE>");
    } else { 
        error.insertAfter(element);
    }
  },
  rules: ..... your rules
});

jsFiddle URL: http://jsfiddle.net/Z8hWg/28/

РЕДАКТИРОВАТЬ: Измените свой JavaScript следующим образом:

<script type="text/javascript">
    $(document).ready(function(){        
                var formValidator = {};
                $("#Date").datepicker();       
                formValidator = $("#form1").validate({
                        errorPlacement:function(error,element) {
                                if (element.attr("name") == "selectedItems") {
                                                //Add Code to append the error message to a predefined element
                                        $("#errorDiv").html("Select at least one vehicle");
                                } else {
                                        error.insertAfter(element);
                                }
                        },

                        rules: {
                                avgTime:{
                                        required:true,
                                        number:true
                                },

                                selectedItems:
                                {
                                        required:true
                                },
                                Date:{
                                        required:true,
                                        date:true
                                }

                        },    
                        //onclick: true,
                        submitHandler: function(form) {
                                $("#errorDiv").html("");
                                form.submit();
                        }

                });       
                $("input[name=selectedItems]").bind("change", function() {
                        var me = $(this);
                        var scoper = me.parent().parent();
                        var otherInputs = $("input[name^=mileage]", scoper);
                        otherInputs.attr("disabled", !this.checked);
                        otherInputs.attr("value","");
                        if (this.checked)
                        {
                                otherInputs.addClass('required number');
                                $("#errorDiv").html("");
                        }
                        else
                        {
                                otherInputs.removeClass("required number");
                        }
                        formValidator.element("input[name=selectedItems]");
                });


        });  
</script>