Sprawdzanie poprawności jQuery: zmień domyślny komunikat o błędzie

363

Czy istnieje prosty sposób zmiany domyślnych wartości błędów we wtyczce sprawdzania poprawności jQuery ?

Chcę tylko przepisać komunikaty o błędach, aby były bardziej osobiste w mojej aplikacji - mam wiele pól, więc nie chcę ustawiać komunikatu indywidualnie dla pola x ... Wiem, że mogę to zrobić!

Kevin Brown
źródło

Odpowiedzi:

732

Dodaj ten kod do osobnego pliku / skryptu dołączonego po wtyczce sprawdzania poprawności, aby zastąpić wiadomości, edytuj do woli :)

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}.")
});
Nick Craver
źródło
31
Działa świetnie. Właśnie dodałem: $ .extend ($. Validator.messages, {wymagany: „Wymagany”});
Ravi Ram
6
Użyłem tego jako szybkiej poprawki dla formy wielojęzycznej: if ($ ('body'). Attr ('lang') == "es") {jQuery.extend ...};
Heraldmonkey,
5
@NickCraver, chciałem tylko powiedzieć, że nigdy nie spodziewałem się wygenerować tylu głosów pozytywnych dzięki temu pytaniu ... i dobrze zrobione, aby uzyskać szybką i szybką odpowiedź!
Kevin Brown
3
Przepraszam, nie działa. Nie jest wyświetlany żaden komunikat, tylko wymagany komunikat jest wyświetlany, chociaż użyłem minlength.
Pratik
2
Czy możemy zawrzeć nazwę elementu formularza w komunikacie o błędzie. Zamiast tylko ogólnej wiadomości. tzn. wymagane jest pole logowania zamiast To pole jest wymagane
Musaddiq Khan
239

Możesz określić własne wiadomości podczas sprawdzania poprawności połączenia. Usuwając i skracając ten kod z formularza Zapamiętaj mleko, używanego 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 interfejs API do sprawdzania poprawności (...): http://jqueryvalidation.org/validate

Steven
źródło
7
Dzięki za wkład, ale jeśli zapoznasz się bliżej z pytaniem, pytam, jak zmienić wartości domyślne. Wiem, że mogę określić unikalne wiadomości.
Kevin Brown,
41
Po prostu wskoczyłem do środka - było to dla mnie pomocne, nawet jeśli nie było celowe dla pytania.
Brien Malone
1
Tak, to faktycznie wygląda na lepszy pomysł niż zmiana ustawień domyślnych, chociaż o to pierwotnie poprosił OP
Roger
2
@LisaCerilli Miałem to samo, naprawiłem to, zmieniając jQuery.format("...najQuery.validator.format("...
lehel
1
Wiem, że to stare, ale pierwszy link jest zepsuty.
akousmata
87

To działało dla mnie:

$.validator.messages.required = 'required';
Josh
źródło
$ .validator.messages.maxlength = jQuery.validator.format („Wpisz nie więcej niż {0} znaków.”); nie działa. Zamiast tego korzystam z rozwiązania Nicka Craversa.
Vidar Vestnes
1
@VidarVestnes Rozwiązanie działa również w Twoim scenariuszu. Wystarczy określić ciąg formatu, a wtyczka $.validator.messages.maxlength = "Please enter no more than {0} characters.";
zajmie się
48

To działało dla mnie:

// 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.",
            }
        }
    })
Mahmoud Fadel
źródło
Zauważ, że nawet jeśli ta odpowiedź dotyczy jqueryValidation, a nie jqueryFileUpload, istnieją również messagesopcje w $().fileuploadfunkcji.
Xavier Portebois
39

Ponieważ już korzystamy z JQuery, możemy pozwolić projektantom stron na dodawanie niestandardowych komunikatów do znaczników zamiast kodu:

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

Lub bardziej ogólne rozwiązanie wykorzystujące pojedynczy krótki atrybut danych-msg we 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 zawiera coś takiego:

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

$('#form1').validate({
    // ...
    messages: {
        firstName: getMsg('#firstName'),
        lastName: getMsg('#lastName')
    }
    // ...
});
użytkownik1207577
źródło
To świetna strategia, szczególnie jeśli potrzebujesz dynamicznego zestawu komunikatów, który nie znajduje się w plikach js ...
Charles Harmon
@ user1207577, Tak, możemy ustawić niestandardowe wiadomości, ale w jaki sposób możemy wyświetlić komunikat o minimalnej i maksymalnej długości. Mam na myśli, że jeśli ustawimy niestandardowy, wtedy min i maks komunikat nie będzie wyświetlany. Masz jakiś pomysł?
Naren Verma,
22

Innym możliwym rozwiązaniem jest zapętlenie pól, dodanie tego samego komunikatu o błędzie do każdego pola.

$('.required').each(function(index) {
  $(this).rules("add", {
    messages: {
      required: "Custom error message."
   }
  });
});
Ganske
źródło
1
To rozwiązanie było dokładnie tym, czego szukałem ... w moim scenariuszu każde pole formularza ma etykietę, więc znajduję odpowiednią etykietę i umieszczam ją w wiadomości, więc na końcu jest napisane: „Imię jest wymagane”. Bardzo miło, Ganske.
tjans
1
+1 Chociaż wszystkie pozostałe odpowiedzi są prawidłowe, to właśnie tej składni szukałem.
scott.korin
6

Zamiast zmieniać kod źródłowy wtyczki, możesz dołączyć dodatkowy plik js w formacie podobnym do tego w folderze lokalizacji pobierania i dołączyć go po załadowaniu pliku validation.js

jQuery.extend(jQuery.validator.messages, {
    required: ...,
    maxlength: jQuery.validator.format(...),
    ...
});
drganie
źródło
To nie jest Jest to technicznie takie samo jak twoja odpowiedź. Zamieściłem swój komentarz do starej wersji twojej odpowiedzi. Potem napisałem własną odpowiedź. Wszystko bez ciągłego przeładowywania strony. Tak więc widziałem tylko zredagowaną odpowiedź podczas sprawdzania komentarza
fluktuacje
5

@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), będzie ona dostępna dla wszystkich twoich widoków

Krolock
źródło
4

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

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

Poniższe podejścia wykorzystują „nazwę symbolu zastępczego” zamiast „tego pola”.

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  
       });  
   });  
sanjeev
źródło
Dziękujemy za udostępnienie tego. Użycie „errorClass” i „errorElement” jest genialne! Mogę teraz zastosować styl i lokalizację moich komunikatów o błędach utworzonych na podstawie weryfikacji!
justdan23
3

Najnowsza wersja ma kilka fajnych rzeczy do zrobienia w linii.

Jeśli jest to proste pole wejściowe, możesz dodać taki atrybut data-validation-error-msg-

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

Jeśli potrzebujesz czegoś nieco cięższego, możesz w pełni dostosować rzeczy za pomocą zmiennej zawierającej wszystkie wartości przekazywane do funkcji sprawdzania poprawności. Odwołaj się do tego linku, aby uzyskać szczegółowe informacje - https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

Stephen Sprinkle
źródło
1
Jest to inna wtyczka niż wtyczka jQuery Validation, o którą OP poprosił. Nie jest to jednak zły wybór, szczególnie jeśli umieszczanie danych związanych z walidacją (reguły, wiadomości) w HTML przemawia do ciebie (wtyczka jQuery Validation działa w odwrotny sposób, używając JavaScript do tego wszystkiego). Parsley.js to kolejna bardzo popularna i w pełni funkcjonalna wtyczka sprawdzania poprawności oparta na atrybutach HTML.
Endre Both
2

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

$.validator.messages.required = "";
dangel
źródło
1
Jak to zrobić dla konkretnego pola?
151291,
1

jQuery Form Validation Niestandardowy komunikat o błędzie -tutsmake

Próbny

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

Deweloper
źródło
-2

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

Przykład: ustaw typ pola w, aby wpisać = „e-mail”

następnie wtyczka zidentyfikuje pole i zweryfikuje poprawność.

Vidura
źródło
nie prosi o poprawne sprawdzenie poprawności, prosi o przepisanie wiadomości ... „Chcę tylko napisać komunikaty o błędach, aby były bardziej osobiste w mojej aplikacji”
Benoit