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

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

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

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

To działało dla mnie:

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

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

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

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

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

@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

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

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

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

$.validator.messages.required = "";

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

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ść.