jQuery Validation ( confronto campi )

**newbobotime** · 13-01-2012, 14:53

Ciao Raga, urge aiutino

Come faccio a validare 2 campi data con il plugin jquery validation ?

ho un semplice form con le 2 date, ovviamente mi servono per lanciare una query con condizione

codice:

 data BETWEEN $data_start and $data_end

come faccio a bloccare l'invio del form se la $data_end è minore della $data_start, visualizzando i messaggi jquery ?

mi aiutate please ?

.

**Vindav** · 13-01-2012, 16:28

in che formato sono le date?

**newbobotime** · 13-01-2012, 17:53

visualizzati tramite select (dinamica) prelevati da MySQL,
posso gestire il dato tramite query come voglio, e fare entrare la data in qualsiasi formato nel campo della select.
Adesso il valore del campo ( quello che ritengo più consono ) è quello americano ovvero: 2012-01-13

.

**Vindav** · 13-01-2012, 19:11

eccoti un esempio:

codice:

submitHandler: function(form) {
		var data1 = $("#data1").val().split('-');
	    var data2 = $("#data2").val().split('-');
	    data1 = new Date(data1[0],data1[1],data1[2]);
	    data2 = new Date(data2[0],data2[1],data2[2]);
		(data2 > data1) ? form.submit() : $("#errorContainer").html("data1 deve essere minore di data2").show(); 
	}

Il controllo viene effettuato al submit del form

**newbobotime** · 14-01-2012, 11:35

Forse non mi sono spiegato bene.
Vorrei capire come implementare all'interno del plugin jquery validation un controllo su 2 campi.

Supponendo che io abbia uno script di validazione come quello sotto riportato, come faccio a rilevare ed avvisare l'utente ( alla perdita del focus del campo ) che il dato nel campo inserito deve essere maggiore del campo precedente ? Nel mio caso le 2 date ?

Come puoi notare lo script verifica la congruenza delle password, se l'utente non inserisce correttamente la password di verifica, alla perdita del focus il plugin visualizza il msg di errore,

codice:

confirm_password: {
				required: true,
				minlength: 5,
				equalTo: "#password"
},

senza che l'utente sia costretto a completare il form e cliccare sul submit,
e questo grazie ad ajax, il mio intento era proprio questo.

mi puoi aiutare ?

codice:

<script type="text/javascript">
$.validator.setDefaults({
	submitHandler: function() { alert("submitted!"); }
});

$().ready(function() {
	// validate the comment form when it is submitted
	$("#commentForm").validate();

	// validate signup form on keyup and submit
	$("#signupForm").validate({
		rules: {
			firstname: "required",
			lastname: "required",
			username: {
				required: true,
				minlength: 2
			},
			password: {
				required: true,
				minlength: 5
			},
			confirm_password: {
				required: true,
				minlength: 5,
				equalTo: "#password"
			},
			email: {
				required: true,
				email: true
			},
			topic: {
				required: "#newsletter:checked",
				minlength: 2
			},
			agree: "required"
		},
		messages: {
			firstname: "Please enter your firstname",
			lastname: "Please enter your lastname",
			username: {
				required: "Please enter a username",
				minlength: "Your username must consist of at least 2 characters"
			},
			password: {
				required: "Please provide a password",
				minlength: "Your password must be at least 5 characters long"
			},
			confirm_password: {
				required: "Please provide a password",
				minlength: "Your password must be at least 5 characters long",
				equalTo: "Please enter the same password as above"
			},
			email: "Please enter a valid email address",
			agree: "Please accept our policy"
		}
	});

	// propose username by combining first- and lastname
	$("#username").focus(function() {
		var firstname = $("#firstname").val();
		var lastname = $("#lastname").val();
		if(firstname && lastname && !this.value) {
			this.value = firstname + "." + lastname;
		}
	});

	//code to hide topic selection, disable for demo
	var newsletter = $("#newsletter");
	// newsletter topics are optional, hide at first
	var inital = newsletter.is(":checked");
	var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
	var topicInputs = topics.find("input").attr("disabled", !inital);
	// show when newsletter is checked
	newsletter.click(function() {
		topics[this.checked ? "removeClass" : "addClass"]("gray");
		topicInputs.attr("disabled", !this.checked);
	});
});
</script>

**Vindav** · 16-01-2012, 11:21

Forse non mi sono spiegato bene.
Vorrei capire come implementare all'interno del plugin jquery validation un controllo su 2 campi.

Ti eri spiegato benissimo, infatti il codice che ho postato fa riferimento al plugin validation, solo che il controllo lo fa al submit del form, anche perche di solito i metodi del plugin servono per controllare un singolo campo... mentre tu chiedi un controllo incrociato tra due campi, cmq si puo fare, devi crearti dei metodi customizzati da aggiungere al plugin, uno che controlla se la data è minore di un altra passata come parametro, e l'altro che controlla che sia maggiore... appena ho tempo te li posto

**newbobotime** · 16-01-2012, 13:00

grazie mille Vindav attendo fiducioso.

Nel frattempo visto la mia scarsa conoscenza JS avrei un altro problema da risolvere, e spero che tu o qualcun'altro possiate aiutarmi.

Riguarda sempre juery validation,

PROBLEMA:
All'interno di una pagina contente il form per un login ho inserito lo script jquery,
su Firefox nessun problema funziona tutto a meraviglia,
su IE 7 NO !

Effetuando un debugging (tramite DebugBar) mi restituisce questo messaggio:

codice:

Linea: 22
Carattere: 3
Codice: 0
Messaggio di Errore: Previsto identificatore, stringa o numero
URL: http://localhost/login.php

questa è la pagina completa:

codice:

<?php
ob_start(); // serve per la funzione Header(Location ...) per non far partire gli Heders HTML prima della fine della pagina 
session_start(); // fa partire la sessione ... 

if(!isset($_GET['isValid'])) $_GET['isValid'] = ''; // se isValid non è settato la inizializzo a NULL
$isValid = $_GET['isValid'];

if(isset($_GET['userid'])) $userid = $_GET['userid'];
else $userid = '';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">

$().ready(function() {

	$("#formLogin").validate({
		rules: {
			userid: {
				required: true,
				minlength: 7,
				remote: "inc/check-username.php"
			},
			password: {
				required: true
			},			
		},		
		messages: {
			userid: {
				required: "Inserire il proprio User ID",
				minlength: jQuery.format("User ID inserito risulta essere inferiore dei {0} caratteri richiesti"),
				remote: "User ID inserito NON PRESENTE in tabella utenti autorizzati"
			},
			password: {
				required: "Il campo PASSWORD risulta essere vuoto",
			}
			
		},
		
	});
	
});
</script>
</head>
<body>
<form action="inc/auth.php" method="post" class="formLogin" id="formLogin">
<div id="alert" ><?php echo $isValid; ?></div>
<fieldset>
<label for="userid">User ID</label><input name="userid" type="text" class="required"  id="userid" value="<?php echo $userid;  ?>" />

<label for="password">Password</label><input name="password" type="password" class="required"  id="password"/>

<input name="submit" type="submit" id="submit" value="Login" class="button"/>
</fieldset>
</form>
</div>
</body>
</html>

Mi date una mano ?!

thanks

.

**Vindav** · 16-01-2012, 13:36

Ecco un esempio:

codice:

$.validator.addMethod(
	"lowerOtherDate", function(value, element, param) {
		return this.optional(element) || $(param).val() == "" || new Date(value) < new Date($(param).val());
	},
	"data1 deve essere minore di data2"
);

$.validator.addMethod(
	"higherOtherDate", function(value, element, param) {
		return this.optional(element) || $(param).val() == "" || new Date(value) > new Date($(param).val());
	},
    "data1 deve essere minore di data2"
);

$("#form1").validate({
	rules:{				
		data1: {
			required: true,
			date: true,
			lowerOtherDate: "#data2",
		},
		data2: {
			required: true,
			date: true,
			higherOtherDate: "#data1",
		}
	},
	groups:{
		date: "data1 data2"
	}
});

per l'altro problema ci sono delle virgole di troppo:

codice:

$().ready(function() {

	$("#formLogin").validate({
		rules: {
			userid: {
				required: true,
				minlength: 7,
				remote: "inc/check-username.php"
			},
			password: {
				required: true
			}, 			
		},		
		messages: {
			userid: {
				required: "Inserire il proprio User ID",
				minlength: jQuery.format("User ID inserito risulta essere inferiore dei {0} caratteri richiesti"),
				remote: "User ID inserito NON PRESENTE in tabella utenti autorizzati"
			},
			password: {
				required: "Il campo PASSWORD risulta essere vuoto",
			}
			
		}, 
		
	});
	
});

Ma è strano che ff non dia errore

**newbobotime** · 16-01-2012, 15:07

Grande Vindav !
Problema virgole risolto !
(c'era ancora un'altra virgola da togliere )

codice:

password: {
		required: "Il campo PASSWORD risulta essere vuoto",
}

Invece il controllo sulle date non funge

ho visto che c'era duplicato il metodo

codice:

$.validator.addMethod()

in ogni caso non va cmq.

.

**Vindav** · 16-01-2012, 15:19

Che doppione? i metodi da aggiungere sono 2, non c'è nessun doppione

Posta lo script modificato che fa uso dei 2 metodi che ti ho passato...

Discussione: jQuery Validation ( confronto campi )

Strumenti discussione

Ricerca discussione

Visualizza

jQuery Validation ( confronto campi )

Permessi di invio