Перевірка jQuery: змінити повідомлення про помилку за замовчуванням

Чи є простий спосіб змінити значення помилок за замовчуванням у плагіні перевірки jQuery ?

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

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

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

Ви можете вказати власні повідомлення у валідаційному дзвінку. Знімаючи та скорочуючи цей код із форми реєстрації запам'ятати молоко, що використовується у документації на валідацію валідації ( 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

Це працювало для мене:

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

Це працювало для мене:

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

Оскільки ми вже використовуємо 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')
    }
    // ...
});

Ще одне можливе рішення - провести петлю над полями, додавши однакове повідомлення про помилку до кожного поля.

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

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

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

@Josh: Ви можете розширити своє рішення за допомогою перекладеного Повідомлення зі свого ресурсного пакета

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

Якщо ви введете цю кодову частину у свій _Layout.cshtml (MVC), вона доступна для всіх ваших переглядів

Я ніколи не думав, що це буде так просто, я працював над проектом, щоб вирішити таку перевірку.

Нижченаведена відповідь буде дуже корисною для тих, хто хоче змінити повідомлення про перевірку без особливих зусиль.

Наведені нижче підходи використовують замість "цього поля" ім'я заповнювача.

Ви можете легко змінювати речі

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

Найновіша версія має кілька приємних інтерактивних речей, які ви можете зробити.

Якщо це просте поле введення, ви можете додати такий атрибут data-validation-error-msg-

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

Якщо вам потрібно щось трохи важче, ви можете повністю налаштувати речі, використовуючи змінну з усіма значеннями, які передаються у функцію перевірки. Перейдіть за цим посиланням для отримання детальної інформації - https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

Щоб видалити всі повідомлення про помилки за замовчуванням, використовуйте

$.validator.messages.required = "";

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>

замість цих спеціальних повідомлень про помилки ми можемо вказати тип текстового поля.

Наприклад: встановіть тип поля в на type = 'email'

тоді плагін ідентифікує поле та правильно перевірить.