Convalida jQuery: modifica il messaggio di errore predefinito

Esiste un modo semplice per modificare i valori di errore predefiniti nel plug-in di convalida jQuery ?

Voglio solo riscrivere i messaggi di errore in modo che siano più personali per la mia app: ho molti campi, quindi non voglio impostare il messaggio singolarmente per il campo x ... So che posso farlo!

Aggiungi questo codice in un file / script separato incluso dopo il plugin di convalida per sovrascrivere i messaggi, modifica a piacimento :)

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

È possibile specificare i propri messaggi nella chiamata di convalida. Eliminando e abbreviando questo codice dal modulo di iscrizione Remember the Milk utilizzato nella documentazione del plugin di convalida ( http://jquery.bassistance.de/validate/demo/milk/ ), puoi facilmente specificare i tuoi messaggi:

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

L'API completa per validate (...): http://jqueryvalidation.org/validate

Questo ha funzionato per me:

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

Questo ha funzionato per me:

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

Dato che stiamo già utilizzando JQuery, possiamo consentire ai progettisti di pagine di aggiungere messaggi personalizzati al markup anziché al codice:

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

Oppure, una soluzione più generale che utilizza un singolo attributo data-msg breve su tutti i campi:

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

E il codice contiene quindi qualcosa del genere:

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

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

Un'altra possibile soluzione è quella di passare in rassegna i campi, aggiungendo lo stesso messaggio di errore a ciascun campo.

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

Invece di modificare il codice sorgente del plug-in è possibile includere un file js aggiuntivo nel formato come quelli nella cartella di localizzazione dei download e includerlo dopo aver caricato validation.js

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

@Josh: puoi espandere la tua soluzione con il messaggio tradotto dal tuo pacchetto di risorse

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

Se inserisci questa parte di codice nel tuo _Layout.cshtml (MVC), è disponibile per tutte le tue visualizzazioni

Non avrei mai pensato che sarebbe stato così facile, stavo lavorando a un progetto per gestire tale convalida.

La risposta di seguito sarà di grande aiuto per chi desidera modificare il messaggio di convalida senza troppi sforzi.

Gli approcci seguenti utilizzano il "Nome segnaposto" al posto di "Questo campo".

Puoi facilmente modificare le cose

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

La versione più recente ha delle belle cose in linea che puoi fare.

Se è un campo di input semplice puoi aggiungere l'attributo in data-validation-error-msgquesto modo -

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

Se hai bisogno di qualcosa di un po 'più pesante, puoi personalizzare completamente le cose usando una variabile con tutti i valori passati nella funzione validate. Fai riferimento a questo link per tutti i dettagli - https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

Per rimuovere tutti i messaggi di errore predefiniti utilizzare

$.validator.messages.required = "";

Messaggio di errore personalizzato di convalida modulo jQuery -tutsmake

dimostrazione

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

invece di questi messaggi di errore personalizzati possiamo specificare il tipo di campo di testo.

Es: imposta il tipo di campo su type = 'email'

quindi il plugin identificherà il campo e lo convaliderà correttamente.