jQuery validation plugin - show only the first error at errorContainer

Question

Hi there, I have this:

function validateEmail(){
  // ###############################
  $("#contato_form").validate({
   errorContainer: "#wrapperError",
   errorLabelContainer: "#wrapperError span.error",
   debug:true,
      rules: {
    nome: { required:true },
    email: { required:true },
    mensagem: { required:true }
      },
      messages: {
    nome: { required:'Informe seu nome.' },
    email: { required:'Informe um endereço email válido.' },
    mensagem: { required:'Por favor, escreva sua mensagem.' }  
      },
  submitHandler: function() {
   $.ajax({
      type: "POST",
      url: "http://www.mydomain.com/sendemail.php",
      data: ({nome: $("input#nome").val(), email: $("input#email").val(), mensagem: $("textarea#mensagem").val()}),
      success: function(msg){
     $('div#enviado').html(' ').append(msg);
      }
    });
  }
   });
}   

When I submit. I got this error message:

  Informe seu nome.Informe um endereço email válido.Por favor, escreva sua mensagem.  

How can I get only the first error no that errorContainer? Once the first input is ok, then the next error and so on..

Thanks

Answer 1

Not sure if this will work, but maybe you can change the error text first thing in the submitHandler function using the following code:

var errorSpan = $('#wrapperError span.error');
errorSpan.text(errorSpan.text().match(/^[^.]*\.?/g));

Answer 2

showErrors: function(errorMap, errorList) {
    if (errorList.length) {
       var s = errorList.shift();
       var n = [];
       n.push(s);
       this.errorList = n;
    }
    this.defaultShowErrors();
},

This code removes all error elements from plugin errorList but first after validation is done but before showing it. I think, this could be written in shorter way, but left so for easy understanding the solution idea. I hope this help. And one remark...sometimes, under certain circumstances instead of only one error message you can get shown all of them. To prevent this try to group fields to validate by following code (for eg.):

   groups: {
      logon: "login password"
   },messages : {
      login : {required:"Enter login"},
      password : {required:"Enter password"}
   }