Xác thực jQuery: thay đổi thông báo lỗi mặc định

Có cách nào đơn giản để thay đổi các giá trị lỗi mặc định trong plugin xác thực jQuery không?

Tôi chỉ muốn viết lại các thông báo lỗi để cá nhân hơn cho ứng dụng của mình - Tôi có rất nhiều trường, vì vậy tôi không muốn đặt thông báo riêng cho trường x ... Tôi biết tôi có thể làm điều đó!

Thêm mã này vào một tệp / tập lệnh riêng biệt được bao gồm sau khi xác thực plugin để ghi đè các tin nhắn, chỉnh sửa theo ý muốn :)

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

Bạn có thể chỉ định tin nhắn của riêng bạn trong cuộc gọi xác nhận. Nâng và viết tắt mã này từ biểu mẫu Ghi nhớ sữa được sử dụng trong tài liệu plugin Xác thực ( http://jquery.bassistance.de/validate/demo/milk/ ), bạn có thể dễ dàng chỉ định tin nhắn của riêng mình:

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 hoàn chỉnh để xác thực (...): http://jqueryvalidation.org/validate

Điều này làm việc cho tôi:

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

Điều này làm việc cho tôi:

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

Vì chúng tôi đã sử dụng JQuery, chúng tôi có thể cho phép các nhà thiết kế trang thêm thông báo tùy chỉnh vào đánh dấu thay vì mã:

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

Hoặc, một giải pháp tổng quát hơn bằng cách sử dụng một thuộc tính thông điệp dữ liệu ngắn trên tất cả các trường:

<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>

Và mã sau đó chứa một cái gì đó như thế này:

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

$('#form1').validate({
    // ...
    messages: {
        firstName: getMsg('#firstName'),
        lastName: getMsg('#lastName')
    }
    // ...
});

Một giải pháp khả thi khác là lặp qua các trường, thêm thông báo lỗi tương tự vào từng trường.

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

Thay vì thay đổi mã nguồn plugin, bạn có thể bao gồm một tệp js bổ sung theo định dạng như các tệp trong thư mục bản địa hóa tải xuống và bao gồm mã đó sau khi tải tệp xác thực.js

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

@Josh: Bạn có thể mở rộng giải pháp của mình với Tin nhắn được dịch từ gói tài nguyên của bạn

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

Nếu bạn đặt phần mã này vào _Layout.cshtml (MVC) thì nó có sẵn cho tất cả các chế độ xem của bạn

Tôi chưa bao giờ nghĩ rằng điều này sẽ dễ dàng như vậy, tôi đã làm việc trên một dự án để xử lý xác nhận như vậy.

Câu trả lời dưới đây sẽ giúp ích rất nhiều cho một người muốn thay đổi thông báo xác nhận mà không cần nỗ lực nhiều.

Các cách tiếp cận dưới đây sử dụng "Tên giữ chỗ" thay cho "Trường này".

Bạn có thể dễ dàng sửa đổi mọi thứ

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

Phiên bản mới nhất có một số nội dung hay mà bạn có thể làm.

Nếu đó là một trường nhập đơn giản, bạn có thể thêm thuộc tính data-validation-error-msgnhư thế này -

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

Nếu bạn cần một cái gì đó nặng hơn một chút, bạn hoàn toàn có thể tùy chỉnh mọi thứ bằng cách sử dụng một biến với tất cả các giá trị được truyền vào hàm xác thực. Tham khảo liên kết này để biết chi tiết đầy đủ - https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

Để xóa tất cả các thông báo lỗi mặc định, hãy sử dụng

$.validator.messages.required = "";

Xác thực mẫu jQuery Thông báo lỗi tùy chỉnh -tutsmake

Bản giới thiệu

$(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>

thay vì các thông báo lỗi tùy chỉnh này, chúng tôi có thể chỉ định loại trường văn bản.

Ví dụ: đặt loại trường vào để gõ = 'email'

sau đó plugin sẽ xác định trường và xác nhận chính xác.