Проверка jQuery .showErrors в div вместо предупреждения

Question

Я ищу способ использования метода jQuery validator.showErrors для отображения общего сообщения об ошибке над моей формой всякий раз, когда есть какие-либо ошибки, в то же время отображая отдельные сообщения об ошибках каждое поле. В настоящее время у меня есть следующий код, но хотелось бы изменить предупреждение, чтобы вместо этого показывать div или что-то подобное. Любая помощь приветствуется.

$(document).ready(function() { 
$('#signin').validate({ 
    rules: { 
     email: { 
      required: true, 
      email: true 
     }, 
     password: { 
      required: true, 
      rangelength:[8,16] 
     } 
    }, //end rules 
    messages: { 
     email: { 
      required: 'Required field', 
      email: 'This is not a valid email address' 
     }, 
     password: { 
      required: 'Please type a password', 
      rangelength: 'Password must be between 8 and 16 characters long.' 
     } 
    },//end messages 
    errorPlacement: function(error, element) { 
     if(element.is(':radio') || element.is(':checkbox')) { 
      error.appendTo(element.parent()); 
     } else { 
      error.insertAfter(element); 
     } 
    },//end errorPlacement 
    showErrors: function(errorMap, errorList) { 
     if (submitted) { 
      var summary = "You have the following errors: \n"; 
      $.each(errorList, function() { summary += " * " + this.message + "\n"; }); 
      alert(summary); 
      submitted = false; 
     } 
     this.defaultShowErrors(); 
    },   
    invalidHandler: function(form, validator) { 
     submitted = true; 
    } 
});//end validate 
}); // end ready 

Answer 1

Добавление значения в DIV довольно легко, ваш код почти завершена, вам просто нужно создать DIV и вставить в него данные:

HTML:

<div id="signin_errors" >errors will go here</div> 
<br/> 
<form id="signin" type="post" > 
    email: <input id="email" name="email"/> 
    <br/> 
    pass: <input id="password" name="password"/> 
    <input type= "submit"/> 
</form> 

JS :

$('#signin').validate({ 
    rules: { 
     email: { 
      required: true, 
      email: true 
     }, 
     password: { 
      required: true, 
      rangelength:[8,16] 
     } 
    }, //end rules 
    messages: { 
     email: { 
      required: 'Required field', 
      email: 'This is not a valid email address' 
     }, 
     password: { 
      required: 'Please type a password', 
      rangelength: 'Password must be between 8 and 16 characters long.' 
     } 
    },//end messages 
    errorPlacement: function(error, element) { 
     if(element.is(':radio') || element.is(':checkbox')) { 
      error.appendTo(element.parent()); 
     } else { 
      error.insertAfter(element); 
     } 
    },//end errorPlacement 
    showErrors: function(errorMap, errorList) { 
     if (submitted) { 
      var summary = "You have the following errors: <br/>"; 
      $.each(errorList, function() { summary += " * " + this.message + "<br/>"; }); 
      $("#signin_errors").html(summary); 
      submitted = false; 
     } 

     this.defaultShowErrors(); 
    },   
    invalidHandler: function(form, validator) { 
     submitted = true; 
    } 
});//end validate 

working fiddle