Проверка JQuery: изменить сообщение об ошибке по умолчанию

301

Есть ли простой способ изменить значения ошибок по умолчанию в плагин проверки jQuery?

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

Теги:
jquery-validate

12 ответов

574
Лучший ответ

Добавьте этот код в отдельный файл / script включенный после плагин проверки для переопределения сообщений, отредактируйте по желанию:)

jQuery.extend(jQuery.validator.messages, {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
    minlength: jQuery.validator.format("Please enter at least {0} characters."),
    rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
    range: jQuery.validator.format("Please enter a value between {0} and {1}."),
    max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
    min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});
  • 0
    @ Кевин - Не совсем ... нужно хотя бы установить переменные, что и делает. Вы можете включить это на странице, в другом .js , любым методом, который вы хотите запустить после плагина для установки сообщений.
  • 31
    Работал отлично. Я просто добавил: $ .extend ($. Validator.messages, {обязательный: "обязательный"});
Показать ещё 7 комментариев
192

Вы можете указать свои собственные сообщения в подтверждении. Поднимая и сокращая этот код из формы "Запомнить имя", используемой в документации плагина Validation (http://jquery.bassistance.de/validate/demo/milk/), вы можете легко указать свои собственные сообщения

var validator = $("#signupform").validate({
    rules: {
        firstname: "required",
        lastname: "required",
        username: {
            required: true,
            minlength: 2,
            remote: "users.php"
        }
    },
    messages: {
        firstname: "Enter your firstname",
        lastname: "Enter your lastname",
        username: {
            required: "Enter a username",
            minlength: jQuery.format("Enter at least {0} characters"),
            remote: jQuery.format("{0} is already in use")
        }
    }
}

Полный API для проверки (...): http://jqueryvalidation.org/validate

  • 5
    Спасибо за ввод, но если вы прочитаете вопрос более внимательно, я спрашиваю, как изменить значения по умолчанию. Я знаю, что могу указать уникальные сообщения.
  • 39
    Просто подача - это было полезно для меня, даже если не в цель для вопроса.
Показать ещё 4 комментария
74

Это сработало для меня:

$.validator.messages.required = 'required';
  • 0
    $ .validator.messages.maxlength = jQuery.validator.format («Пожалуйста, введите не более {0} символов.»); не работает. Я предлагаю вместо этого использовать решение Ника Крэйвера.
  • 1
    @VidarVestnes Решение работает и для вашего сценария. Вы просто указываете строку формата, а плагин делает все остальное: $.validator.messages.maxlength = "Please enter no more than {0} characters.";
Показать ещё 1 комментарий
31

Это сработало для меня:

// Change default JQuery validation Messages.
$("#addnewcadidateform").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            email: "required email",
        },
        messages: {
            firstname: "Enter your First Name",
            lastname: "Enter your Last Name",
            email: {
                required: "Enter your Email",
                email: "Please enter a valid email address.",

            }


        }
    })
  • 0
    Обратите внимание, что даже если этот ответ предназначен для jqueryValidation, а не jqueryFileUpload, в функции $().fileupload также есть опции messages .
23

Поскольку мы уже используем JQuery, мы можем позволить разработчикам страниц добавлять пользовательские сообщения в разметку, а не код:

<input ... data-msg-required="my message" ...

Или более общее решение, использующее один короткий атрибут data-msg для всех полей:

<form id="form1">
    <input type="text" id="firstName" name="firstName" 
        data-msg="Please enter your first name" />
    <br />
    <input type="text" id="lastName" name="lastName" 
        data-msg="Please enter your last name" />
    <br />
    <input type="submit" />
</form>

И тогда код содержит следующее:

function getMsg(selector) {
    return $(selector).attr('data-msg');
}

$('#form1').validate({
    // ...
    messages: {
        firstName: getMsg('#firstName'),
        lastName: getMsg('#lastName')
    }
    // ...
});
  • 0
    Это отличная стратегия, особенно если вам нужен динамический набор сообщений, отсутствующий в ваших файлах js ...
  • 0
    @ user1207577, Да, мы можем установить пользовательские сообщения, но как мы можем отображать сообщения минимальной и максимальной длины. Я имею в виду, если мы установим пользовательский режим, то сообщения min и max не будут отображаться. Есть идеи?
21

Другим возможным решением является цикл над полями, добавление одного и того же сообщения об ошибке в каждое поле.

$('.required').each(function(index) {
  $(this).rules("add", {
    messages: {
      required: "Custom error message."
   }
  });
});
  • 1
    Это решение было именно тем, что я искал ... в моем сценарии у каждого поля формы есть метка, поэтому я нахожу соответствующую метку и добавляю ее к сообщению, чтобы в конце он сказал: «Имя необходимо». Очень мило, Ганске.
  • 1
    +1 Пока все остальные ответы верны, это синтаксис, который я искал.
6

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

jQuery.extend(jQuery.validator.messages, {
    required: ...,
    maxlength: jQuery.validator.format(...),
    ...
});
  • 0
    Это не так. Технически это так же, как ваш ответ. Я разместил свой комментарий к старой версии вашего ответа. Затем написал свой ответ. Все без перезагрузки страницы. Таким образом, я видел только, что вы отредактировали ответ при проверке вашего комментария
5

@Josh: вы можете расширить свое решение с помощью переведенного сообщения из своего ресурсного пакета

<script type="text/javascript">
    $.validator.messages.number = '@Html.Raw(@Resources.General.ErrorMessageNotANumber)';
</script>

Если вы поместите эту часть кода в свой _Layout.cshtml(MVC), он будет доступен для всех ваших просмотров

5

В новейшей версии есть несколько полезных материалов, которые вы можете сделать.

Если это простое поле ввода, вы можете добавить атрибут data-validation-error-msg следующим образом:

data-validation-error-msg="Invalid Regex"

Если вам нужно что-то немного тяжелее, вы можете полностью настроить вещи, используя переменную со всеми значениями, которые передаются в функцию проверки. Ссылка на эту ссылку для получения более подробной информации - https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

  • 1
    Этот плагин отличается от плагина проверки jQuery, о котором спрашивал OP. Тем не менее, это неплохой выбор, особенно если вы размещаете связанные с валидацией данные (правила, сообщения) в HTML, которые вам нравятся (плагин валидации jQuery использует противоположный путь, используя для этого Javascript). Чтобы упомянуть другую альтернативу записи, Parsley.js - это еще один широко используемый и полнофункциональный плагин проверки, который опирается на атрибуты HTML.
3

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

Нижеприведенный ответ будет очень полезен тем, кто хочет изменить сообщение проверки без особых усилий.

В приведенных ниже подходах вместо "Это поле" используется "Имя заполнитель".

Вы можете легко изменить вещи

   // Jquery Validation   
   $('.js-validation').each(function(){

       //Validation Error Messages 

       var validationObjectArray = [];

       var validationMessages = {};

       $(this).find('input,select').each(function(){  // add more type hear

          var singleElementMessages = {};

          var fieldName = $(this).attr('name');

          if(!fieldName){  //field Name is not defined continue ;
              return true;
          }


          // If attr data-error-field-name is given give it a priority , and then to placeholder and lastly a simple text

          var fieldPlaceholderName = $(this).data('error-field-name') || $(this).attr('placeholder') || "This Field";

          if( $( this ).prop( 'required' )){

              singleElementMessages['required'] = $(this).data('error-required-message') || $(this).data('error-message')  || fieldPlaceholderName + " is required";

          }

          if( $( this ).attr( 'type' ) == 'email' ){

              singleElementMessages['email'] = $(this).data('error-email-message') || $(this).data('error-message')  || "Enter valid email in "+fieldPlaceholderName;

          }       



          validationMessages[fieldName] = singleElementMessages;

       });


       $(this).validate({
          errorClass   : "error-message",
          errorElement : "div",
          messages     : validationMessages  
       });  
   });  
2

Чтобы удалить все сообщения об ошибках по умолчанию, используйте

$.validator.messages.required = "";
  • 1
    Как это сделать для конкретной области?
0

вместо этих настраиваемых сообщений об ошибках мы можем указать тип текстового поля.

Ex: задать тип поля для типа = 'email'

тогда плагин будет идентифицировать поле и правильно проверить.

  • 0
    он не просит правильно проверить его, он просит переписать сообщения .... «Я просто хочу переписать сообщения об ошибках, чтобы они были более личными для моего приложения»

Ещё вопросы

Сообщество Overcoder
Наверх
Меню