Validasi jQuery: ubah pesan kesalahan default


363

Apakah ada cara sederhana untuk mengubah nilai kesalahan default di plugin validasi jQuery ?

Saya hanya ingin menulis ulang pesan kesalahan menjadi lebih pribadi untuk aplikasi saya - Saya punya banyak bidang, jadi saya tidak ingin mengatur pesan secara individual untuk bidang x ... Saya tahu saya bisa melakukannya!

Jawaban:


732

Tambahkan kode ini dalam file / skrip terpisah yang disertakan setelah plugin validasi untuk mengganti pesan, sunting sesuka hati :)

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
Bekerja dengan baik. Saya baru saja menambahkan: $ .extend ($. Validator.messages, {wajib: "Wajib"});
Ravi Ram

6
Saya menggunakan ini sebagai perbaikan cepat untuk bentuk multi bahasa: if ($ ('body'). Attr ('lang') == "es") {jQuery.extend ...};
Heraldmonkey

5
@NickCraver, hanya ingin mengatakan bahwa saya tidak pernah berharap untuk menghasilkan begitu banyak upvotes dengan pertanyaan ini ... dan dilakukan dengan baik untuk jawaban yang tepat waktu dan cepat!
Kevin Brown

3
Tidak berfungsi maaf. Tidak ada pesan yang ditampilkan, hanya pesan yang diperlukan yang ditampilkan meskipun saya menggunakan minlength.
Pratik

2
Bisakah kita memasukkan nama elemen form dalam pesan kesalahan. Alih-alih hanya pesan umum. yaitu bidang Login diperlukan sebagai ganti bidang ini diperlukan
Musaddiq Khan

239

Anda dapat menentukan pesan Anda sendiri di panggilan validasi. Mengangkat dan menyingkat kode ini dari formulir pendaftaran Remember the Milk yang digunakan dalam dokumentasi plugin Validasi ( http://jquery.bassistance.de/validate/demo/milk/ ), Anda dapat dengan mudah menentukan pesan Anda sendiri:

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 lengkap untuk memvalidasi (...): http://jqueryvalidation.org/validate


7
Terima kasih atas masukannya, tetapi jika Anda membaca pertanyaan lebih dekat, saya bertanya bagaimana cara mengubah default. Saya tahu saya bisa menentukan pesan unik.
Kevin Brown

41
Hanya melempar - ini sangat membantu saya, bahkan jika tidak tepat sasaran untuk pertanyaan itu.
Brien Malone

1
Ya ini sebenarnya terlihat seperti ide yang lebih baik daripada mengubah default, meskipun itulah yang awalnya diminta oleh OP
Roger

2
@LisaCerilli Saya memiliki hal yang sama, memperbaikinya dengan mengubah jQuery.format("...kejQuery.validator.format("...
lehel

1
Saya tahu ini sudah tua, tetapi tautan pertama rusak.
akousmata

87

Ini bekerja untuk saya:

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

$ .validator.messages.maxlength = jQuery.validator.format ("Harap masukkan tidak lebih dari {0} karakter."); tidak bekerja. Saya sugges menggunakan solusi Nick Cravers.
Vidar Vestnes

1
@VidarVestnes Solusi ini berfungsi untuk skenario Anda juga. Anda cukup menentukan string format, dan plugin melakukan sisanya:$.validator.messages.maxlength = "Please enter no more than {0} characters.";
rusmus

48

Ini bekerja untuk saya:

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

Perhatikan bahwa meskipun jawaban ini untuk jqueryValidation dan bukan jqueryFileUpload, ada juga messagesopsi dalam $().fileuploadfungsi.
Xavier Portebois

39

Karena kami sudah menggunakan JQuery, kami dapat membiarkan perancang halaman menambahkan pesan khusus ke markup alih-alih kode:

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

Atau, solusi yang lebih umum menggunakan atribut data-pesan pendek pada semua bidang:

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

Dan kodenya kemudian berisi sesuatu seperti ini:

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

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

Ini adalah strategi yang hebat, terutama jika Anda memerlukan pesan dinamis yang tidak diatur dalam file js Anda ...
Charles Harmon

@ user1207577, Ya, kami dapat mengatur pesan khusus tetapi bagaimana kami dapat menampilkan pesan panjang min dan panjang maks. Maksud saya Jika kita mengatur kebiasaan maka pesan min dan maks tidak ditampilkan. Ada Gagasan?
Naren Verma

22

Solusi lain yang mungkin adalah untuk mengulang bidang, menambahkan pesan kesalahan yang sama untuk setiap bidang.

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

1
Solusi ini persis apa yang saya cari ... dalam skenario saya setiap bidang formulir memiliki label, jadi saya menemukan label yang sesuai dan menambahkannya ke pesan sehingga pada akhirnya tertulis "Nama Depan diperlukan." Bagus sekali, Ganske.
tanggal

1
+1 Sementara semua jawaban lain valid, ini adalah sintaks yang saya cari.
scott.korin

6

Alih-alih mengubah kode sumber plugin, Anda dapat menyertakan file js tambahan dalam format seperti yang ada di folder lokalisasi unduhan dan memasukkannya setelah memuat validation.js

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

Bukan itu. Secara teknis sama dengan jawaban Anda. Saya mengirim komentar saya ke versi lama jawaban Anda. Kemudian tulis jawaban saya sendiri. Semua tanpa terus memuat ulang halaman. Jadi saya hanya melihat Anda mengedit jawaban ketika memeriksa komentar Anda
jitter

5

@Josh: Anda dapat memperluas solusi Anda dengan Pesan yang diterjemahkan dari kumpulan sumber daya Anda

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

Jika Anda memasukkan bagian kode ini ke _Layout.cshtml (MVC) Anda, itu tersedia untuk semua tampilan Anda


4

Saya tidak pernah berpikir ini akan begitu mudah, saya sedang mengerjakan sebuah proyek untuk menangani validasi seperti itu.

Jawaban di bawah ini akan sangat membantu bagi orang yang ingin mengubah pesan validasi tanpa banyak usaha.

Pendekatan di bawah ini menggunakan "Nama Placeholder" sebagai pengganti "Bidang Ini".

Anda dapat dengan mudah memodifikasi sesuatu

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

Terima kasih telah berbagi ini. Penggunaan "errorClass" dan "errorElement" jenius! Sekarang saya dapat menerapkan gaya dan lokasi pesan kesalahan saya yang dibuat dari validasi!
justdan23

3

Versi terbaru memiliki beberapa hal in-line yang bagus yang dapat Anda lakukan.

Jika ini adalah bidang input sederhana, Anda dapat menambahkan atribut data-validation-error-msgseperti ini -

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

Jika Anda membutuhkan sesuatu yang sedikit lebih berat, Anda dapat sepenuhnya menyesuaikan hal-hal menggunakan variabel dengan semua nilai yang diteruskan ke fungsi validasi. Referensi tautan ini untuk detail lengkap - https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable


1
Ini adalah plugin yang berbeda dari Plugin Validasi jQuery yang ditanyakan OP. Bukan pilihan yang buruk, terutama jika menempatkan data yang terkait dengan validasi (aturan, pesan) di HTML menarik bagi Anda (Plugin Validasi jQuery mengambil cara yang berlawanan, menggunakan Javascript untuk semua itu). Untuk menyebutkan alternatif lain untuk catatan, Parsley.js adalah plugin validasi berfitur lengkap dan banyak digunakan lainnya yang mengandalkan atribut HTML.
Endre Keduanya

2

Untuk menghapus semua pesan kesalahan standar, gunakan

$.validator.messages.required = "";

1
Bagaimana melakukan ini untuk bidang tertentu?
151291

1

Pesan Kesalahan Kustom Validasi Form jQuery -tutsmake

Demo

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

alih-alih pesan kesalahan khusus ini, kami dapat menentukan jenis bidang teks.

Contoh: setel jenis isian ke dalam ketik = 'email'

maka plugin akan mengidentifikasi bidang dan memvalidasi dengan benar.


dia tidak meminta untuk memvalidasinya dengan benar, dia meminta untuk menulis ulang pesan .... "Saya hanya ingin menulis ulang pesan kesalahan menjadi lebih pribadi untuk aplikasi saya"
Benoit
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.