jQuery validation: zmień domyślny komunikat o błędzie

Możesz określić własne wiadomości w wywołaniu walidacji. Podnoszenie i skracanie tego kodu z formularza Zapamiętaj mleko używane w dokumentacji wtyczki Validation ( http://jquery.bassistance.de/validate/demo/milk/), możesz łatwo określić własne wiadomości:

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

Kompletny API do walidacji(...): http://jqueryvalidation.org/validate

To mi pomogło:

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

To mi pomogło:

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

Ponieważ używamy już JQuery, możemy pozwolić projektantom stron dodawać własne wiadomości do znaczników, a nie do kodu:

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

Lub bardziej ogólne rozwiązanie wykorzystujące jeden krótki atrybut Data-msg na wszystkich polach:

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

A kod wtedy zawiera coś takiego:

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

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

Innym możliwym rozwiązaniem jest pętla nad polami, dodając ten sam komunikat o błędzie do każdego pola.

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

Zamiast zmieniać kod źródłowy wtyczki możesz dołączyć dodatkowy plik js w formacie takim jak te w folderze lokalizacji pobierania i dołączyć go po załadowaniu walidacji.js

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

Najnowsza wersja ma kilka fajnych rzeczy w linii, które możesz zrobić.

Jeśli jest to proste pole wejściowe, możesz dodać atrybut data-validation-error-msg w następujący sposób --

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

Jeśli potrzebujesz czegoś nieco cięższego, możesz w pełni dostosować rzeczy za pomocą zmiennej ze wszystkimi wartościami, które są przekazywane do funkcji walidacji. Więcej informacji można znaleźć pod tym linkiem -- https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

@Josh: możesz rozszerzyć swoje rozwiązanie o przetłumaczoną wiadomość z pakietu zasobów

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

Jeśli umieścisz tę część kodu w swoim _Layout.cshtml (MVC) jest dostępny dla wszystkich Twoich widoków

Nigdy nie myślałem, że to będzie tak proste, pracowałem nad projektem, który poradzi sobie z taką walidacją.

Poniższa odpowiedź będzie bardzo pomocna dla tych, którzy chcą zmienić komunikat walidacji bez większego wysiłku.

Poniższe podejścia używają "Placeholder name "zamiast"This Field".

Możesz łatwo modyfikować rzeczy

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

Aby usunąć wszystkie domyślne komunikaty o błędach użyj

$.validator.messages.required = "";

Zamiast tych niestandardowych komunikatów o błędach możemy określić typ pola tekstowego.

Ex: Ustaw typ pola na typ = "email"

Następnie plugin zidentyfikuje pole i poprawi poprawność.