Validação jQuery: alterar mensagem de erro padrão

363

Existe uma maneira simples de alterar os valores de erro padrão no plug-in de validação jQuery ?

Eu só quero reescrever as mensagens de erro para serem mais pessoais para o meu aplicativo - eu tenho muitos campos, então não quero definir a mensagem individualmente para o campo x ... Eu sei que posso fazer isso!

Kevin Brown
fonte

Respostas:

732

Adicione este código em um arquivo / script separado incluído após o plug-in de validação para substituir as mensagens, edite à vontade :)

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
fonte
31
Trabalhou muito bem. Acabei de adicionar: $ .extend ($. Validator.messages, {required: "Required"});
Ravi Ram
6
Eu usei isso como uma solução rápida para um formulário em vários idiomas: if ($ ('body'). Attr ('lang') == "es") {jQuery.extend ...};
Heraldmonkey
5
@NickCraver, só queria dizer que eu nunca esperava gerar tantos votos positivos com esta pergunta ... e bem feito por uma resposta rápida e oportuna!
Kevin Brown
3
Desculpe, não está funcionando. Nenhuma mensagem é mostrada, apenas a mensagem necessária é mostrada, embora eu tenha usado minlength.
Pratik
2
Podemos incluir o nome do elemento do formulário na mensagem de erro. Em vez de apenas mensagem geral. ie campo Login é necessária , em vez de Este campo é obrigatório
Mossadegh Khan
239

Você pode especificar suas próprias mensagens na chamada de validação. Ao levantar e abreviar esse código do formulário de inscrição Remember the Milk, usado na documentação do plugin Validation ( http://jquery.bassistance.de/validate/demo/milk/ ), você pode especificar facilmente suas próprias mensagens:

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

A API completa para validar (...): http://jqueryvalidation.org/validate

Steven
fonte
7
Obrigado pela entrada, mas se você ler a pergunta mais de perto, estou perguntando como alterar os padrões. Eu sei que posso especificar mensagens exclusivas.
Kevin Brown
41
Apenas participando - isso foi útil para mim, mesmo que não seja o objetivo da pergunta.
Brien Malone
11
Sim isso realmente se parece com uma idéia melhor do que mudar os padrões, apesar de que é o que o OP originalmente pediu
Roger
2
@LisaCerilli Eu tive o mesmo, fixa-lo, alterando jQuery.format("...ajQuery.validator.format("...
lehel
11
Eu sei que isso é antigo, mas o primeiro link está quebrado.
akousmata
87

Isso funcionou para mim:

$.validator.messages.required = 'required';
Josh
fonte
$ .validator.messages.maxlength = jQuery.validator.format ("Por favor, não digite mais que {0} caracteres."); não funciona. Sugiro usar a solução Nick Cravers.
Vidar Vestnes
11
@VidarVestnes A solução também funciona para o seu cenário. Você acabou de especificar a string de formato e o plug-in faz o resto:$.validator.messages.maxlength = "Please enter no more than {0} characters.";
rusmus
48

Isso funcionou para mim:

// 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
fonte
Observe que, mesmo que esta resposta seja para jqueryValidation e não para jqueryFileUpload, também há as messagesopções na $().fileuploadfunção.
Xavier Portebois
39

Como já estamos usando o JQuery, podemos permitir que os designers da página adicionem mensagens personalizadas à marcação e não ao código:

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

Ou, uma solução mais geral usando um único atributo curto de data-msg em todos os campos:

<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 o código contém algo como isto:

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

$('#form1').validate({
    // ...
    messages: {
        firstName: getMsg('#firstName'),
        lastName: getMsg('#lastName')
    }
    // ...
});
user1207577
fonte
Esta é uma grande estratégia, especialmente se você precisa de um conjunto de mensagens dinâmica não em seus arquivos js ...
Charles Harmon
@ user1207577, Sim, podemos definir as mensagens personalizadas, mas como podemos exibir a mensagem de comprimento mínimo e comprimento máximo. Quero dizer, se definirmos o costume, as mensagens min e max não serão exibidas. Alguma idéia?
Naren Verma 10/09
22

Outra solução possível é fazer um loop nos campos, adicionando a mesma mensagem de erro a cada campo.

$('.required').each(function(index) {
  $(this).rules("add", {
    messages: {
      required: "Custom error message."
   }
  });
});
Ganske
fonte
11
Essa solução era exatamente o que eu estava procurando ... no meu cenário, todos os campos de formulário têm um rótulo, então eu encontro o rótulo correspondente e o prefixo à mensagem para que, no final, diga "O primeiro nome é obrigatório". Muito bom, Ganske.
tjans
11
+1 Enquanto todas as outras respostas são válidas, esta é a sintaxe que eu estava procurando.
scott.korin
6

Em vez de alterar o código-fonte do plug-in, você pode incluir um arquivo js adicional no formato como os da pasta de localização de downloads e incluí-lo após carregar o validation.js

jQuery.extend(jQuery.validator.messages, {
    required: ...,
    maxlength: jQuery.validator.format(...),
    ...
});
nervosismo
fonte
Não é. É tecnicamente o mesmo que sua resposta. Publiquei meu comentário na versão antiga da sua resposta. Então escrevi minha própria resposta. Tudo sem recarregar a página continuamente. Assim, eu só vi você editar a resposta ao verificar o seu comentário
jitter
5

@ Jos: Você pode expandir sua solução com a Mensagem traduzida do seu pacote de recursos

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

Se você colocar esse código em seu _Layout.cshtml (MVC), ele estará disponível para todas as suas visualizações.

Krolock
fonte
4

Eu nunca pensei que isso seria tão fácil, eu estava trabalhando em um projeto para lidar com essa validação.

A resposta abaixo será de grande ajuda para quem deseja alterar a mensagem de validação sem muito esforço.

As abordagens abaixo usam o "Nome do espaço reservado" no lugar de "Este campo".

Você pode modificar facilmente as coisas

   // 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
fonte
Obrigado por compartilhar isso. O uso de "errorClass" e "errorElement" é genial! Agora posso aplicar o estilo e o local das minhas mensagens de erro criadas a partir da validação!
justdan23
3

A versão mais recente tem algumas coisas legais que você pode fazer.

Se for um campo de entrada simples, você pode adicionar o atributo data-validation-error-msgassim:

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

Se você precisar de algo um pouco mais pesado, poderá personalizar completamente as coisas usando uma variável com todos os valores que são passados ​​para a função validate. Consulte este link para obter detalhes completos - https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

Stephen Sprinkle
fonte
11
Esse é um plug-in diferente do plug-in de validação do jQuery sobre o qual o OP perguntou. Porém, não é uma má escolha, principalmente se colocar dados relacionados à validação (regras, mensagens) no HTML lhe agrada (o plug-in de validação do jQuery segue o caminho oposto, usando Javascript para tudo isso). Para mencionar outra alternativa para o registro, o Parsley.js é outro plug-in de validação muito usado e completo que depende de atributos HTML.
Endre Both
2

Para remover todas as mensagens de erro padrão, use

$.validator.messages.required = "";
dangel
fonte
11
Como fazer isso para um campo específico?
151291
1

Mensagem de erro personalizada de validação de formulário jQuery -tutsmake

Demo

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

Desenvolvedor
fonte
-2

em vez dessas mensagens de erro personalizadas, podemos especificar o tipo do campo de texto.

Ex: defina o tipo do campo para type = 'email'

o plugin identificará o campo e será validado corretamente.

vidura
fonte
ele não pede para validá-lo corretamente, ele pede para reescrever as mensagens .... "Eu só quero reescrever as mensagens de erro para que sejam mais pessoais para o meu aplicativo"
Benoit