JQuery проверять с помощью динамического числа полей

У меня есть форма со сценой, которая имеет динамическое число групп полей, где число основано на ответах на предыдущем этапе.

Я создаю поля server-side как массив, т.е.

<input id="foo[0]"...
<input id="bar[0]"...

<input id="foo[1]"...
<input id="bar[1]"...

<input id="foo[2]"...
<input id="bar[2]"... etc

Независимо от количества, все поля обязательны, и в некоторых случаях мне также необходимо проверить тип и количество цифр. Я использую jQuery validate plugin для обработки на стороне клиента (да, резервное копирование с помощью серверной части тоже), и проверка не может сделайте inline, так как форма должна пройти XHTML Strict (EDIT: см. мое добавление ниже).

Моя проблема в том, что я не могу решить, как использовать проверку с динамическим числом полей. Вот как выглядит синтаксис проверки правильности для остальной части формы:

$(document).ready(function() {

    // validate stage_form on keyup and submit
    var validator = $("#form_id").validate({

        // rules for field names
        rules: {

            name: "required", 
            address: "required",
            age: { required: true, number: true }

        },

        // inline error messages for fields above
        messages: {

            name: "Please enter your name", 
            address: "Please enter your address",
            age: { required: "Please enter your age", number: "Please enter a number" }

        }

    });

});

Ответ 1

на самом деле это должно работать. Если вы используете классы вместо инициализации правил как параметры validate().

Разметка:

<input id="foo[0]" class="required"
<input id="bar[0]" class="required number"

<input id="foo[1]" class="required"
<input id="bar[1]" class="required email"

JQuery

$(document).ready(function() {

  var validator = $("#form_id").validate({
    messages: {
            name: "Please enter your name", 
            address: "Please enter your address",
            age: { 
               required: "Please enter your age", 
               number: "Please enter a number" 
            }

    }

  });

});

надеюсь, что это сработает. Синан.

Ответ 2

Вы пытались использовать правила пользовательского класса для определения несовместимых правил xhtml?

В примере в docs используется только один класс, но я полагаю, вы могли бы комбинировать разные пользовательские классы для достижения правил проверки необходимость. Я не пробовал это для себя.

Ответ 3

Нет ответов, поэтому я отправлю свое "промежуточное" решение, которое должно установить встроенные правила проверки для "required" и "type", оставив "maxlength" на серверной проверке, а затем отобразить пользовательские сообщения с встроенным заголовком тег.

Это, вероятно, достаточно хорошо для целей этой работы, но мне все же интересно, есть ли способ сделать это "полностью" в jQuery.

Ответ 4

Вот еще один способ сделать это.

/* Normal validate initialisation. */
$('#myForm').validate({

    /* Use the submitHandler method to add custom-selector-based validation. */
    submitHandler: function(form, ev) {

        /* Find your dynamic field/s. Note that you may want to access them via a scope external to validate, as any selection you do in this internal scope will be static from the form pre-edit state. */
        var el = $('#selector');

        /* Do your custom validation. */
        if (  el.val() !== 'A'  ) {

            /* Show any errors:- 'fieldname': 'error message'. */
            this.showErrors({
                'name-of-a-field-near-where-you-want-your-error-placed': 'Please enter "A" to continue'
            });

            /* Prevent form submission. */
            return;
        } 
    }
});

Ответ 5

Я нашел способ сделать это с помощью "метаданных".

Это должно использоваться внутри шаблона с динамическим именем. Поэтому мне не нужно знать имя.

Недопустимо использование кода с чистым javascript с чистыми тегами.

<script src="jquery.metadata.js" type="text/javascript"></script>

<input validate="{required: true, email: true, messages: { required: 'i'm required', 'i'm not valid e-mail' }}" name="dynamicRow[  myRandomNumber ]"type="text" class="input_normal" />

 $( function() {
     // setup stuff
     $.metadata.setType("attr", "validate"); 
});