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

Question

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

Я генерирую поля на стороне сервера в виде массива, т.е.

<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

Независимо от номера, все поля обязательны для заполнения & amp; Мне также нужно проверить тип & amp; количество цифр в некоторых случаях. Я использую плагин проверки JQuery для обработки на стороне клиента (да, резервное копирование с помощью сервера побочные вещи тоже) & amp; валидация не может быть выполнена встроенной, так как форма должна пройти строгий XHTML (РЕДАКТИРОВАТЬ: см. мое приложение ниже).

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

$(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" }

        }

    });

});

Answer 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" 
            }

    }

  });

});

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

Answer 2

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

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

Answer 3

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

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

Answer 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's 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;
        } 
    }
});

Answer 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"); 
});