jQuery adicionar método ao plugin validator

[skcratch]

Viva!

Depois de muito pesquisar no Google, ainda não consegui encontrar um exemplo para aquilo que pretendo. Neste momento, tenho um formulário, cuja validação é feita com base no plugin Validator da biblioteca jQuery. Aquilo que eu pretendia, era adicionar um método a esse mesmo Validator que realizasse a validação de um conjunto de checkbox, sendo obrigatório pelo menos uma delas estar seleccionada.

Grato desde já pela ajuda,

Cumps!

😉

[yoda]

var n = $('form input[type="checkbox"]:checked').length;

if (n >= 1)
  alert('és o maior!');
else
  alert('*sigh*');

Se não funcionar, mete assim : form input:checked

[skcratch]

Viva!

Antes demais, obrigado pela sugestão. No entanto, aquilo que pretendia, era um método que pudesse adicionar ao plugin validator da biblioteca jQuery.

Grato desde já pela ajuda,

Cumps!

😉

[yoda]

Podes adicionar, mas é à mão .. não me parece que encontres "sub-plugins" 😉

Manda aí a pagina do plugin sff.

[skcratch]

Viva!

A seguir envio o código que implementei para validar dois radio buttons que permitem ao utilizador seleccionar o seu sexo:

jQuery.validator.addMethod("gender_required", function(value, element, selector) {
		  var commonParent = $(element).parent();
		  //If one of children is at least checked return true
		  
		  
		  //else return false

		  var kids = commonParent.children();
		  var len = kids.length;
		  var oneChecked=false;
		  for(var i=0;i<len;i++)
		  {
			  
			  if(kids[i].checked==true)
				  oneChecked=true;
		  }
		  
		  if(!oneChecked){
			  $('<label for="'+selector+'"  class="error">Please select your gender</label>').appendTo(commonParent); 
		  		return false;
			}
		  else
			  return true;
		});

Neste momento, a mensagem de erro é criada através deste método, já que não sei como a criar recorrendo ao validator do jQuery.

Será que alguém me pode indicar como definir a mensagem de erro, bem como o local onde a mesma é escrita?

Grato desde já pela ajuda!

Cumps!

😉

[yoda]

Boas,

Podes jogar com a posição absoluta nas divs para criar mensagens de erro no local que pretendes. Ou seja, crias uma div com os seguintes atributos :

div.error {
  display:none;
  position:absolute;
  top: 0;
  left: 0;
  width:200px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

Depois é só apanhares o node no código onde queres que eles esteja associado, e jogar com a posição da div :

offset = $(element).offset();

$('div.error').css({ 'top' : offset.top, 'left', offset.left}).show();

A partir do javascript acima, é só jogares com a posição das radio buttons e ver, relativamente à posição delas, onde fica melhor o erro .. Se quiseres que fique alinhado à direita da radio button, fazes algo assim :

w = $(element).css('width');

$('div.error').css({ 'top' : offset.top, 'left', offset.left + w}).show();

Acho que isto chega para inventares o teu próprio método. Nunca usei o validador do Jquery, portanto também não sei do que é capaz.

[skcratch]

Viva!

Antes demais, quero agradecer a ajuda que foi prestada até agora. No entanto, o código que foi dado como exemplo não serviu de grande ajuda, já que os meus conhecimentos em Javascript e jQuery são muito reduzidos. O meu objectivo era tentar encontrar código de aplicação mais "imediata", mas estou a ver que vai ser complicado.

Cumps!

😉

[hbarquero]

Confirma qual o Plugin que estas a usar.

Eu pessoalmente uso o seguinte:

jQuery validation plug-in 1.5.1

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

eu acho simples de usar. se tiveres duvidas em relação à forma de usar este posso dar-te algumas dicas 😉

[skcratch]

Viva!

Os problemas que tive até foi em validar um marcador HTML <select>, um conjunto de dois radio buttons e um conjunto de checkboxes.

Será que podias dar uma ajuda?

Cumps!

😉

[skcratch]

Viva!

Dadas as minhas limitações, tanto ao nível do CSS, como da biblioteca jQuery, creio que é melhor utilizar algo mais simples para validar o meu formulário. Decidi usar uma tabela, porque para mim, com o nível de conhecimentos que possuo, é mais fácil alinhar os elementos desta forma.

A seguir, apresento um exemplo de um campos do formulário, que possuo neste momento:

<tr>
<td align="right"><label for="username">Username:</label></td>
<td><input type="text" name="username" id="username" /></td>
</tr>

De salientar, que o formulário se encontra dentro da tabela. Pelo que li em alguns exemplos na web, o jQuery permite manipular os elementos da DOM bem como os estilos associados a cada um deles. Basicamente, aquilo que pretendia, era que caso o input username estivesse vazio, fosse apresentada uma mensagem de erro à sua frente. Para isso, creio que seria melhor adicionar uma terceira coluna à tabela, onde estaria contida a label ou span associada à mensagem, para assim ser mais fácil alinhar os elementos. No plano ideal, pelo menos para mim, seria que o jQuery fizesse a validação do input e a partir daí apenas manipulasse a classe da mensagem associada ao input username, sendo que esta apenas seria visível, caso houvesse um erro (neste caso, username vazio), sendo-lhe aplicada a classe CSS adequada. Para finalizar, gostaria que as mensagens de erro, caso existam, fossem apresentadas no momento da validação e que fossem ocultas caso o utilizador corrigisse o erro, antes da próxima submissão (creio que seria associado ao evento keyUp, certo?  ?).

Será que alguém poderia dar uma ajuda?

Cumps!

😉

[hbarquero]

Bom dia,

Preparei-te um exemplo de como podes fazer, como iras reparar não tem nenhum ficheiro CSS, e tem algum CSS metido directamente no codigo. Deveras criar um ficheiro CSS e atribuir as respectivas classes, de qualquer forma penso que servirá de exemplo de arranque 😕

<html>
<head>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

<script type="text/javascript">
$(document).ready(function() { 

	/*esconder as mensagens de info e erro*/
	$("#frmuser").parent().find(".info").css("display", "none");
	$("#frmuser").parent().find(".erro").css("display", "none");

	/*funcção para mostrar/ocultar a mensagem de info quando o campo é clicado */
	$("#frmuser input").focus(function(){
		$(this).parent().find(".erro").css("display", "none");
		$(this).parent().find(".info").css("display", "block");
	}).blur(function(){
		$(this).parent().find(".info").css("display", "none");
	});

	/* regras para validar o formulário */
	var frmvalidator = $("#frmuser").validate({
		onkeyup:false,
		onfocusout: false,
		onclick: false,
		focusInvalid: false,
		rules: { 
			username: {
				required:true,
				minlength:"3",
				maxlength:"255"
				},
			email: {
				required:true,
				minlength:"7",
				maxlength:"255",
				email:true
				}
		},
		/* mostrar e ocultar as mensagens de erro */
	   showErrors: function(errorMap, errorList) {
			$("#frmuser input").find(".erro").css("display", "none");
			for (element in errorMap) {
				$("#"+element).parent().find(".erro").css("display", "block");
			}
		}
	});
});
</script>

</head>
<body>
<form method="post" action="" id="frmuser">
	<table>
		<tr>
			<td align="right"><label for="username">Username:</label></td>
			<td>
				<input type="text" name="username" id="username"  style="float:left;" />
				<span class="info" style="float:left;">introduza o seu username</span>
				<span class="erro" style="float:left;">username errado</span>
			</td>
		</tr>
		<tr>
			<td align="right"><label for="username">email:</label></td>
			<td>
				<input type="text" name="email" id="email"  style="float:left;"/>
				<span class="info"  style="float:left;">introduza o seu email</span>
				<span class="erro"  style="float:left;">email errado</span>
			</td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" name="bt" value="Enviar" /></td>
		</tr>	
	</table>
</form>
</body>
</html>

Acrescentei mais um campo (email) ao formulário apenas para que vejas como validar outros campos.

Espero que sirva 😉

Eu normalmente estas coisas faço com DIV's, mas assim também dá

[skcratch]

Viva!

@hbarquero - Muito obrigado mesmo, nem sei como agradecer. Assim que puder analisar e testar o teu código, eu digo aqui alguma coisa. Mais uma vez, obrigado.

Grato desde já pela ajuda,

Cumps!

😉

[skcratch]

Viva!

Neste momento estou a testar o código anterior e estou a denotar alguns comportamentos estranhos e que estou com algumas dificuldades em identificar. Gostaria que o formulário se mantivesse sempre na mesma posição e não "flutuasse" com base nas mensagens de erro e de informação que são mostradas.

Será que alguém me pode dar uma ajuda?

Cumps!

😉

[skcratch]

Viva!

O problema que referi anteriormente já está resolvido. Fixei a largura da célula da tabela que contém o formulário, já a prever o espaço ocupado pelas mensagens de erro, caso estas sejam apresentadas.

Cumps!

😉

[skcratch]

Viva!

Agora o problema é outro. No formulário que estou a desenvolver, os elementos não têm a mesma largura. Pelo que percebo, a mensagem é colocada imediatamente após o respectivo elemento e dessa forma as mensagens de erro não ficam todas alinhadas entre si, como se pode ver na imagem a seguir apresentada:

http://img23.imageshack.us/i/formxw.jpg/

Aquilo que pretendia, era que as mensagens estivessem alinhadas entre si à esquerda.

Será que alguém pode dar uma ajuda?

Cumps!

😉

[yoda]

Se tivesses usado a minha solução, podias controlar isso sem problemas 😉

[skcratch]

Viva!

Não usei a tua solução apenas porque não percebi tão bem o código que deste como exemplo, como aquele que foi apresentado a seguir, apenas por isso. Mesmo assim, agradeço imenso a tua sugestão.

Cumps!

😉

[skcratch]

Viva!

Alguém me consegue dar uma ajuda? (alinhar as mensagens de erro do formulário que apresentei anteriormente...  :down:)

Cumps!

😄