Jump to content

jQuery adicionar método ao plugin validator


skcratch

Recommended Posts

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!

😉

Link to comment
Share on other sites

  • 2 weeks later...

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!

😉

Link to comment
Share on other 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.

Link to comment
Share on other 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!

😉

Link to comment
Share on other sites

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 😉

Tudo o que não provoca a minha morte, torna-me mais forte.http://formacao-cursos.com

Link to comment
Share on other 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?  ?).

Será que alguém poderia dar uma ajuda?

Cumps!

😉

Link to comment
Share on other 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 😕

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

Tudo o que não provoca a minha morte, torna-me mais forte.http://formacao-cursos.com

Link to comment
Share on other 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!

😉

Link to comment
Share on other 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:

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!

😉

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.