mensagem de erro com o YUIComo estou utilizando o YUI para criar uma interface com usuario rica nada mais natural que exibir as mensagens de erro de validacao como um dialogo do YUI. Para que isso seja possivel e preciso estar atento apenas a um detalhe: o Validation exibe/esconde os erros de validacao alternando a propriedade CSS display do errorContainer entre os valores block e none respectivamente. Isso nao funcionara com nosso dialogo. Ao inves disso precisamos invocar os metodos show e hide do dialogo. Isso sera feito personalizando o metodo showErrors do Validation. Observe os comentarios no codigo.<%@ taglib prefix="s" uri="/struts-tags" %><html> <head> <title>Exemplo validacao com Validation</title> <script type="text/javascript" src="js/jquery-1.2.1.min.js"></script> <script type="text/javascript" src="js/jquery.validate.js" ></script> <link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui/build/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui/build/container/assets/skins/sam/container.css" /> <script type="text/javascript" src="yui/build/utilities/utilities.js"></script> <script type="text/javascript" src="yui/build/button/button.js"></script> <script type="text/javascript" src="yui/build/container/container.js"></script <script type="text/javascript"> YAHOO.util.Event.onDOMReady(function() { //registra o namespace YAHOO.namespace("net.viniciusaraujo.dialogos"); //cria a instancia do dialogo com 600px de largura, fixado no centro da tela com o icone de aviso. YAHOO.net.viniciusaraujo.dialogos.dlErros = new YAHOO.widget.SimpleDialog("errosDeValidacao", { width: "600px", fixedcenter: true, visible: false, draggable: true, close: true, icon: YAHOO.widget.SimpleDialog.ICON_WARN, constraintoviewport: true, //cria um botao com o rotulo OK cuja acao e esconder o dialogo buttons: [ { text:"OK", handler: function() {this.hide();}, isDefault:true } ] }); YAHOO.net.viniciusaraujo.dialogos.dlErros.render(); //sempre que o dialogo for fechado todos os itens de erro serao escondidos YAHOO.net.viniciusaraujo.dialogos.dlErros.hideEvent.subscribe(function() { esconderErros(); }); }); //essa funcao esconde os intes de erro da lista. function esconderErros() { //esconde todos os itens da lista de erro alternando a propriedade CSS display para 'none'. //isso e feito para evitar que erros que foram corrigidos aparecam novamente no dialogo de erro var itensListaErros = $("#errosDeValidacao > div.bd > ul > li"); for (var i = 0; i < itensListaErros.length; i++) { $(itensListaErros[i]).css("display", "none"); } } $().ready(function() { $("#pessoaForm").validate({ rules : { "pessoa.nome" : "required", "pessoa.paisOrigem" : "required" }, errorContainer : $("#errosDeValidacao"), errorLabelContainer : $("#errosDeValidacao > ul"), wrapper: "li", showErrors: function(errorMap, errorList) { //a mensagem de erro agora e personalizada de acordo com o numero de erros. var erros = this.numberOfInvalids(); if (erros) { var mensagem = erros == 1 ? "Foi encontrado um erro no formulario" : "Foram encontrados " + erros + " erros no formulario"; $("#errosDeValidacao > div.bd p").html(mensagem); //esconde os erros anterios. esconderErros(); //executa o procedimento padrao do Validation para exibir os erros de validacao this.defaultShowErrors(); //exibe o dialogo de erro YAHOO.net.viniciusaraujo.dialogos.dlErros.show(); } } }); }); </script> </head> <body> <div id="errosDeValidacao"> <div class="hd">Erro</div> <div class="bd"> <p>Nao foi possisvel continuar devido ao(s) seguinte(s) erro(s) de validacao </p> <ul> <li><label for="nome" class="error">O nome e obrigatorio para o cadastro.</label></li> <li><label for="pais" class="error">O pais de origem e obrigatorio para o cadastro.</label></li> </ul> </div> </div> <s:form id="pessoaForm"> <s:textfield id="nome" name="pessoa.nome" label="Nome" required="true" /> <s:select id="pais" name="pessoa.paisOrigem" label="Pais de Origem" required="true" list="paises" /> <s:submit /> </s:form> </body></html>Referenciasstruts 2JQueryValidationYahoo User Interface