Validasi jQuery: ubah pesan kesalahan default

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!

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

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

Ini bekerja untuk saya:

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

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

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

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

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

@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

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

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

Untuk menghapus semua pesan kesalahan standar, gunakan

$.validator.messages.required = "";

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="[email protected]"><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>

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.