jQuery Validation Plugin - добавление правил, которые применяются к нескольким полям

Question

Я использую плагин jQuery Validation :

У меня есть несколько полей в большой форме, к которым я хочу применить те же правила. Я упростил код для этого примера. Этот код не работает, но я хочу сделать что-то вроде этого. Второе правило должно применяться как к first_name, так и к last_name. Я хочу инкапсулировать все правила здесь, в этой функции, а не редактировать списки классов некоторых элементов формы, чтобы добавить требуемый класс или что-то еще.

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

$('#affiliate_signup').validate(
       {
          rules: 
          {
            email: {
                required: true,
                email: true
            },
            first_name,last_name: {
                required: true
            },
            password: {
                required: true,
                minlength: 4
            }
          }
       });

Заранее спасибо.

Answer 1

Для моего примера это базовый начальный код:

HTML:

<input type="text" name="field_1" />
<input type="text" name="field_2" />
<input type="text" name="field_3" />

JQuery:

$('#myForm').validate({
    rules: {
        field_1: {
            required: true,
            number: true
        },
        field_2: {
            required: true,
            number: true
        },
        field_3: {
            required: true,
            number: true
        }
    }
});

http://jsfiddle.net/9W3F7

---

Вариант 1a) Вы можете извлечь группы правил и объединить их в общие переменные.

var ruleSet1 = {
        required: true,
        number: true
    };

$('#myForm').validate({
    rules: {
        field_1: ruleSet1,
        field_2: ruleSet1,
        field_3: ruleSet1
    }
});

http://jsfiddle.net/9W3F7/1

---

Вариант 1b) Относится к пункту 1a выше, но в зависимости от вашего уровня сложности может выделить правила, общие для определенных групп, и использовать .extend() для их рекомбинации в бесконечное множество способов.

var ruleSet_default = {
        required: true,
        number: true
    };

var ruleSet1 = {
        max: 99
    };
$.extend(ruleSet1, ruleSet_default); // combines defaults into set 1

var ruleSet2 = {
        min: 3
    };
$.extend(ruleSet2, ruleSet_default); // combines defaults into set 2

$('#myForm').validate({
    rules: {
        field_1: ruleSet2,
        field_2: ruleSet_default,
        field_3: ruleSet1
    }
});

Конечный результат:

• field_1 будет обязательным числом не менее 3.

• field_2 будет просто необходимым числом.

• field_3 будет обязательным числом, не превышающим 99.

http://jsfiddle.net/9W3F7/2

---

Вариант 2a) Вы можете назначать классы своим полям на основе желаемых общих правил, а затем назначать эти правила классам. Используя метод addClassRules, мы берем составные правила и превращаем их в имя класса.

HTML:

<input type="text" name="field_1" class="num" />
<input type="text" name="field_2" class="num" />
<input type="text" name="field_3" class="num" />

JQuery:

$('#myform').validate({ // initialize the plugin
    // other options
});

$.validator.addClassRules({
    num: {
        required: true,
        number: true
    }
});

http://jsfiddle.net/9W3F7/4/

---

Опция 2b) Основное отличие от варианта 2a состоит в том, что вы можете использовать это для назначения правил динамически создаваемым элементам ввода, вызывая метод rules('add') сразу после их создания. Вы могли бы использовать class в качестве селектора, но это не обязательно. Как вы можете видеть ниже, мы использовали селектор подстановочного знака вместо class.

Метод .rules() должен вызываться в любое время после вызова .validate().

JQuery:

$('#myForm').validate({
    // your other plugin options
});

$('[name*="field"]').each(function() {
    $(this).rules('add', {
        required: true,
        number: true
    });
});

http://jsfiddle.net/9W3F7/5/

---

Документация:

• rules('add') метод

• addClassRules метод

Answer 2

Если я вас правильно понял, вы хотите применить множество правил ко многим полям, которые могут отличаться в некоторых правилах, но вам лень повторять те же правила для других полей.Однако, с помощью jQuery validate можно иметь более одного правила в одном поле ввода.Просто используйте обозначение массива здесь.

Чтобы реализовать ваш вариант использования, просто добавьте data атрибуты к каждому полю ввода с правилами, которые вы хотите применить к нему.В лучшем случае используйте формат json в кодировке URL, так что вам просто нужно один атрибут data для каждого поля ввода.E. g.:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>validate test</title>
</head>
<body>
<form id="myForm" name="myForm" method="post" action="www.example.com/my-url">
    <input type="text" name="txt1" data-rules="%7B%22required%22%3Atrue%2C%22minlength%22%3A2%2C%22maxlength%22%3A10%7D" />
    <input type="text" name="txt2" data-rules="%7B%22required%22%3Atrue%2C%22minlength%22%3A2%2C%22maxlength%22%3A10%7D" />
    <input type="number" name="number1" data-rules="%7B%22required%22%3Atrue%2C%22number%22%3Atrue%2C%22min%22%3A1%2C%22max%22%3A999%7D" />
    <input type="email" name="email1" data-rules="%7B%22required%22%3Atrue%2C%22email%22%3Atrue%2C%22minlength%22%3A20%7D" />
    <input type="email" name="email2" data-rules="%7B%22required%22%3Atrue%2C%22email%22%3Atrue%2C%22minlength%22%3A20%7D" />
</form>
<script type="text/javascript">
    var $field = null;
    var rules = {};

    $('#myForm input, #myForm textarea').each(function (index, field) {
        $field = $(field);
        rules[$field.attr('name')] = JSON.parse(decodeURIComponent($field.attr('data-rules')));
    });

    $('#myForm').validate(rules);
</script>
</body>
</html>

Основная технология проста:

1. Создайте свои поля с атрибутом `data-``.
2. Loopнад каждым полем ввода, чтобы получить правила, которые вы хотите применить к нему.
3. Применить собранные вами правила к элементу формы

Вы также можете использовать группы ввода с теми же валидаторами, которыеНапример, используя для этого классы и предопределенные переменные JavaScript с объектом rules.Я думаю, у вас есть идея, как изящно лениться; -)

Answer 3

Вы можете использовать синтаксис 'getter' следующим образом:

   {
      rules: 
      {
        email: {
            required: true,
            email: true
        },

        first_name: {
            required: true
        },

        get last_name() {return this.first_name},

        password: {
            required: true,
            minlength: 4
        }
      }
   }