Как мы можем указать правила для плагина проверки jquery по классам? - PullRequest
37 голосов
/ 27 февраля 2012

Плагин jQuery Validation прекрасно работает и очень прост в использовании:

$(".selector").validate({
})

Просто установив классы CSS, такие как «требуемая электронная почта», будет отображаться сообщение по умолчанию.

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

$(".selector").validate({
   rules: {
     name: "required",
     email: {
       required: true,
       email: true
     }
   },
   messages: {
     name: "Please specify your name",
     email: {
       required: "We need your email address to contact you",
       email: "Your email address must be in the format of name@domain.com"
     }
   }
})

Но нецелесообразно указывать правило для каждого элемента формы, особенно серверных элементов управления в ASP.NET. Можно ли указать правила, которые будут применяться ко всем элементам? Или я могу как-то использовать селектор классов?

Я попробовал следующее, но это не сработало:

$("#frmMyForm").validate
({
    rules:
    {
        $(".required email"):
        {
            required: true,
            email: true
        }
    },
    messages:
    {
        $(".required email"):
        {
            required: "Please enter your email address",
            email: "Your email address must be in the format of name@domain.com"
        }
    }
});

Это, похоже, было синтаксической ошибкой - плагин ничего не делал. Тогда я попробовал:

$("#frmMyForm").validate
({
    rules:
    {
        ".required email":
        {
            required: true,
            email: true
        }
    },
    messages:
    {
        ".required email":
        {
            required: "Please enter your email address",
            email: "Your email address must be in the format of name@domain.com"
        }
    }
});

В нем не было синтаксической ошибки - плагин работал, но игнорировал правила / пользовательские сообщения. Кто-нибудь здесь использовал плагин jQuery Validation? Если да, то как вы применили правила / пользовательские сообщения к нескольким элементам?

Спасибо!

Ответы [ 9 ]

74 голосов
/ 27 февраля 2012

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

HTML:

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

JS:

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

DEMO : http://jsfiddle.net/rq5ra/


ПРИМЕЧАНИЕ. Независимо от того, какая методика ниже используется для назначения правил, плагину необходимо, чтобы каждый элемент имел уникальный name атрибут.


Вариант 1a) Вы можете назначать классы своим полям на основе желаемых общих правил и затем назначать эти правила классам.Вы также можете назначить пользовательские сообщения.

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" />

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

JS:

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

$('.num').each(function() {
    $(this).rules('add', {
        required: true,
        number: true,
        messages: {
            required:  "your custom message",
            number:  "your custom message"
        }
    });
});

DEMO : http://jsfiddle.net/rq5ra/1/

Опция 1b) То же, что и выше, но вместо использованияclass, соответствует общей части атрибута имени:

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

DEMO : http://jsfiddle.net/rq5ra/6/


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

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

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

DEMO : http://jsfiddle.net/rq5ra/4/


Вариант 2b) Относится к пункту 2a выше, но в зависимости от вашего уровня сложности, может выделить правила, общие для определенных групп, и использовать .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

var ruleSet3 = { };
$.extend(ruleSet3, ruleSet1, ruleSet2); // combines sets 2 & 1 into set 3.  Defaults are included since they were already combined into sets 1 & 2 previously.

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

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

  • field_1 будет требуемым числом не менее 3.
  • field_2 будет просто необходимым числом.
  • field_3 будет обязательным числом, не более99.
  • field_4 будет необходимым числом от 3 до 99.

DEMO : http://jsfiddle.net/rq5ra/5/

24 голосов
/ 27 февраля 2012

Вы можете использовать addClassRules , например:


jQuery.validator.addClassRules("name", {
  required: true,
  minlength: 2
});

18 голосов
/ 27 февраля 2012

jQuery.validator.addClassRules(); присоединит проверку к классу, но для сообщений нет опций, будут использоваться общие сообщения об ошибках.

Если вы хотите, чтобы это сработало, вам следует изменить правила следующим образом

$.validator.addMethod(
     "newEmail", //name of a virtual validator
     $.validator.methods.email, //use the actual email validator
     "Random message of email"
);

//Now you can use the addClassRules and give a custom error message as well.
$.validator.addClassRules(
   "email", //your class name
   { newEmail: true }
 );
0 голосов
/ 07 сентября 2018

$.validator.addMethod("cMaxlength", function(value, element, param) {
		
	return $.validator.methods.maxlength.call(this, value, element, param[1]);

}, '{0}');
0 голосов
/ 06 января 2017

Вы можете добавить правила класса, используя метод addClassRules:

Например,

$.validator.addClassRules("your-class", {
  required: true,
  minlength: 2
});

https://jqueryvalidation.org/jQuery.validator.addClassRules/

0 голосов
/ 02 сентября 2015

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

var CreateValidation = function(className, customMessage, validationMethod){
  var objectString = '{"'+ className +'": true}',
  validator = $.validator;

  validator.addMethod(
    className,
    validator.methods[validationMethod],
    customMessage
  );
  validator.addClassRules(
    className,
    JSON.parse(objectString)
  );
};

Пример использования с использованием класса проверки"validation-class-firstname":

CreateValidation('validation-class-firstname', 'Please enter first name', 'required');
0 голосов
/ 08 апреля 2015

$.validator.addMethod("cMaxlength", function(value, element, param) {
		
	return $.validator.methods.maxlength.call(this, value, element, param[1]);

}, '{0}');
0 голосов
/ 16 октября 2014

Альтернативный подход:

$.validator.addMethod("cMaxlength", function(value, element, param) {
		
	return $.validator.methods.maxlength.call(this, value, element, param[1]);

}, '{0}');

Суть: https://gist.github.com/uhtred/833f3b957d61e94fbff6

$.validator.addClassRules({
    'credit-card': {
    	cMaxlength: [ 'Invalid number.', 19 ]
    }
});
0 голосов
/ 06 февраля 2014

Перед этим необходимо включить файл запроса

$("#myform_name").validate({
    onfocusout: function(element) { $(element).valid(); } ,
    rules:{
       myfield_name: {
          required:true
       },
       onkeyup: false,
       messages: {
          myoffer: "May not be empty"
       }
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...