• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

skcratch

[Ajuda] - jQuery adicionar método ao plugin validator

18 mensagens neste tópico

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!

;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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!

;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

Manda aí a pagina do plugin sff.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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!

;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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!

;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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!

;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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?  :hmm:).

Será que alguém poderia dar uma ajuda?

Cumps!

;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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 :confused:

<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á

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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!

;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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!

;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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!

;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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:

formxw.th.jpg

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

Será que alguém pode dar uma ajuda?

Cumps!

;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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!

;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Viva!

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

Cumps!

:D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora