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


363

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

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

Ответы:


732

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

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

31
Работал отлично. Я просто добавил: $ .extend ($. Validator.messages, {обязательный: "обязательный"});
Рави Рам

6
Я использовал это как быстрое исправление для мультиязычной формы: if ($ ('body'). Attr ('lang') == "es") {jQuery.extend ...};
Heraldmonkey

5
@NickCraver, просто хотел сказать, что я никогда не ожидал, что получу так много откликов с этим вопросом ... и молодец для своевременного и быстрого ответа!
Кевин Браун

3
Не работает извините. Сообщение не отображается, только необходимое сообщение отображается, хотя я использовал minlength.
Пратик

2
Можем ли мы включить имя элемента формы в сообщение об ошибке. Вместо только общего сообщения. т. е. поле
логина

239

Вы можете указать свои собственные сообщения в проверке вызова. Сняв и сократив этот код с формы регистрации «Помни о молоке», используемой в документации плагина 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


7
Спасибо за ввод, но если вы прочитаете вопрос более внимательно, я спрашиваю, как изменить значения по умолчанию. Я знаю, что могу указать уникальные сообщения.
Кевин Браун

41
Просто подача - это было полезно для меня, даже если не в цель для вопроса.
Брайен Мэлоун

1
Да, на самом деле это выглядит как лучшая идея, чем изменение значений по умолчанию, хотя это то, о чем первоначально просил ОП
Роджер

2
@LisaCerilli я имел то же самое, установил ее, изменив jQuery.format("...наjQuery.validator.format("...
Lehel

1
Я знаю, что это старый, но первая ссылка не работает.
акусматы

87

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

$.validator.messages.required = 'required';

$ .validator.messages.maxlength = jQuery.validator.format («Пожалуйста, введите не более {0} символов.»); не работает. Я предлагаю вместо этого использовать решение Ника Крэйвера.
Видар Вестнес

1
@VidarVestnes Решение работает и для вашего сценария. Вы просто указываете строку формата, а плагин делает все остальное:$.validator.messages.maxlength = "Please enter no more than {0} characters.";
rusmus

48

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

// 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.",
            }
        }
    })

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

39

Поскольку мы уже используем 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')
    }
    // ...
});

Это отличная стратегия, особенно если вам нужен динамический набор сообщений, отсутствующий в ваших файлах js ...
Чарльз Хармон,

@ user1207577, Да, мы можем установить пользовательские сообщения, но как мы можем отображать сообщения минимальной и максимальной длины. Я имею в виду, если мы установим пользовательский режим, тогда сообщение min и max не будет отображаться. Есть идеи?
Нарен Верма

22

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

$('.required').each(function(index) {
  $(this).rules("add", {
    messages: {
      required: "Custom error message."
   }
  });
});

1
Это решение было именно тем, что я искал ... в моем сценарии у каждого поля формы есть метка, поэтому я нахожу соответствующую метку и добавляю ее к сообщению, чтобы в конце он сказал: «Имя необходимо». Очень мило, Ганске.
10

1
+1 Хотя все остальные ответы верны, это синтаксис, который я искал.
scott.korin

6

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

jQuery.extend(jQuery.validator.messages, {
    required: ...,
    maxlength: jQuery.validator.format(...),
    ...
});

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

5

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

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

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


4

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

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

Приведенные ниже подходы используют «Имя заполнителя» вместо «Это поле».

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

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

Спасибо за то, что поделился этим. Использование «errorClass» и «errorElement» гениально! Теперь я могу применить стилизацию и расположение моих сообщений об ошибках, созданных в результате проверки!
justdan23

3

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

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

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

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


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

2

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

$.validator.messages.required = "";

1
Как это сделать для конкретной области?
151291

1

Пользовательское сообщение об ошибке проверки формы jQuery -tutsmake

демонстрация

$(document).ready(function(){
  $("#registration").validate({
    // Specify validation rules
    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },      
      phone: {
        required: true,
        digits: true,
        minlength: 10,
        maxlength: 10,
      },
      password: {
        required: true,
        minlength: 5,
      }
    },
    messages: {
      firstname: {
      required: "Please enter first name",
     },      
     lastname: {
      required: "Please enter last name",
     },     
     phone: {
      required: "Please enter phone number",
      digits: "Please enter valid phone number",
      minlength: "Phone number field accept only 10 digits",
      maxlength: "Phone number field accept only 10 digits",
     },     
     email: {
      required: "Please enter email address",
      email: "Please enter a valid email address.",
     },
    },
  
  });
});
<!DOCTYPE html>
<html>
<head>
<title>jQuery Form Validation Using validator()</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<style>
  .error{
    color: red;
  }
  label,
  input,
  button {
    border: 0;
    margin-bottom: 3px;
    display: block;
    width: 100%;
  }
 .common_box_body {
    padding: 15px;
    border: 12px solid #28BAA2;
    border-color: #28BAA2;
    border-radius: 15px;
    margin-top: 10px;
    background: #d4edda;
}
</style>
</head>
<body>
<div class="common_box_body test">
  <h2>Registration</h2>
  <form action="#" name="registration" id="registration">
 
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John"><br>
 
    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe"><br>
 
    <label for="phone">Phone</label>
    <input type="text" name="phone" id="phone" placeholder="8889988899"><br>  
 
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="john@doe.com"><br>
 
    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder=""><br>
 
    <input name="submit" type="submit" id="submit" class="submit" value="Submit">
  </form>
</div>
 
</body>
</html>


-2

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

Пример: установить тип поля в type = 'email'

тогда плагин определит поле и подтвердит правильность.


он не просит правильно проверить его, он просит переписать сообщения .... «Я просто хочу переписать сообщения об ошибках, чтобы они были более личными для моего приложения»
Benoit
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.