jQuery doğrulama: varsayılan hata mesajını değiştir

JQuery doğrulama eklentisindeki varsayılan hata değerlerini değiştirmenin basit bir yolu var mı ?

Hata mesajlarını uygulamam için daha kişisel olacak şekilde yeniden yazmak istiyorum - çok fazla alanım var, bu yüzden alanı x için ayrı ayrı ayarlamak istemiyorum ... Bunu yapabileceğimi biliyorum!

Bu kodu , iletileri geçersiz kılmak için doğrulama eklentisinden sonra gelen ayrı bir dosyaya / komut dosyasına ekleyin , dilediğinizde düzenleyin :)

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

Doğrulama çağrısında kendi mesajlarınızı belirtebilirsiniz. Bu kodu, Doğrulama eklentisi belgelerinde ( http://jquery.bassistance.de/validate/demo/milk/ ) kullanılan Sütü Hatırla kayıt formundan kaldırmak ve kısaltmak için kendi mesajlarınızı kolayca belirleyebilirsiniz:

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

Doğrulama için tam API (...): http://jqueryvalidation.org/validate

Bu benim için çalıştı:

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

Bu benim için çalıştı:

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

Zaten JQuery kullandığımızdan, sayfa tasarımcılarının kod yerine biçimlendirmeye özel mesaj eklemesine izin verebiliriz:

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

Veya, tüm alanlarda tek bir kısa veri-msg özniteliği kullanan daha genel bir çözüm:

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

Ve kod daha sonra böyle bir şey içeriyor:

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

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

Bir başka olası çözüm, her alana aynı hata mesajını ekleyerek alanlar üzerinde döngü yapmaktır.

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

Eklenti kaynak kodunu değiştirmek yerine, indirme yerelleştirme klasöründeki gibi ek bir js dosyası ekleyebilir ve validation.js dosyasını yükledikten sonra bu dosyayı ekleyebilirsiniz.

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

@Josh: Kaynak paketinizden çevrilmiş Mesaj ile çözümünüzü genişletebilirsiniz

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

Bu kod parçasını _Layout.cshtml (MVC) içine koyarsanız, tüm görünümleriniz için kullanılabilir

Bunun bu kadar kolay olacağını hiç düşünmemiştim, böyle bir doğrulamayı ele alacak bir proje üzerinde çalışıyordum.

Aşağıdaki cevap, doğrulama mesajını fazla çaba sarf etmeden değiştirmek isteyen kişiye çok yardımcı olacaktır.

Aşağıdaki yaklaşımlar, "Bu Alan" yerine "Yer Tutucu adı" nı kullanır.

Bir şeyi kolayca değiştirebilirsiniz

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

En yeni sürümde yapabileceğiniz bazı güzel satır içi şeyler var.

Basit bir giriş alanı ise, özelliği şu şekilde ekleyebilirsiniz data-validation-error-msg-

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

Biraz daha ağır bir şeye ihtiyacınız varsa, doğrulama işlevine iletilen tüm değerlere sahip bir değişken kullanarak işleri tamamen özelleştirebilirsiniz. Tüm ayrıntılar için bu bağlantıya bakın - https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

Tüm varsayılan hata mesajlarını kaldırmak için şunu kullanın:

$.validator.messages.required = "";

jQuery Form Doğrulama Özel Hata İletisi -utusmake

gösteri

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

bu özel hata mesajları yerine metin alanının türünü belirtebiliriz.

Örn: alanın türünü type = 'email' olarak ayarlayın

eklenti alanı tanımlar ve doğrular.