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

плагин 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 [email protected]"
     }
   }
})

Но нецелесообразно указывать правило для каждого элемента формы, особенно серверных элементов управления в 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 [email protected]"
        }
    }
});

Казалось, что у вас синтаксическая ошибка - плагин ничего не сделал. Затем я попробовал:

$("#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 [email protected]"
        }
    }
});

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

Спасибо!

Ответ 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"
       }
    }
});