Как мы можем указать правила для плагина проверки правильности jquery по классу?

Ответ 1

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

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/

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

   $("#myform_name").validate({
        onfocusout: function(element) { $(element).valid(); } ,
            rules:{
                myfield_name: {
                    required:true
                    },
    onkeyup: false,
            messages: {
                myoffer: "May not be empty"}
});
    });

Ответ 5

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

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

}, '{0}');

Ответ 6

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

}, '{0}');

Ответ 7

Я построил ответ на 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');

Ответ 8

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

например.

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

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

Ответ 9

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

$("#myform_name").validate({
    onfocusout: function(element) { $(element).valid(); } ,
    rules:{
       myfield_name: {
          required:true
       },
       onkeyup: false,
       messages: {
          myoffer: "May not be empty"
       }
    }
});