Pogledajte određenu poruku
Staro 09. 05. 2012.   #1
erazor
novi član
 
Avatar erazor
 
Datum učlanjenja: 16.07.2010
Lokacija: Backa Palanka
Poruke: 3
Hvala: 0
0 "Hvala" u 0 poruka
erazor is on a distinguished road
Default jquery form validation plugin

Pozdrav za sve članove ovog foruma.

Pre nekoliko dana sam odlučio da mi je potreban jquery plugin za validaciju forme, ali način na koji ja želim.
Redovan sam posetilac ovog foruma i želim da podelim to sa vama.

Ujedno projekat se nalazi na Github-u pa nove verzije mozete odavde preuzimati:
https://github.com/petarslavnic/jquery.validateForm

Za sada nemam vremena da napišem bolji help pokušaću u par koraka da sastavim uputstvo za upotrebu!

Kôd:
$(document).ready(function() {
	$('#frmTest').validateForm({
		before: function() {
			$('.msg').html("");
			alert("Are you sure you want to submit the form?");
		},
		success: function(e) {
			e.preventDefault();
			alert('Form has been successfully submitted.');
		},
		error: function(errObjects) {
			$.each(errObjects, function() {
				$(this).css('border', '1px solid #F00');
				var $message = "";
				$.each(this.messages, function(index, value) {
					$message += value + "<br />";
				});
				$(this).next().html($message);
			});
			alert('Some of the fields are improperly filled.');
		},
		events: {
			"keyup change": function() {
				//alert('hello');
				$(this).css('border', '1px solid #000');
			}
		},
		messages: {
			//custom error messages by rule
			required: "This field is required!",
			min_length: "Field must be min 5 caracters long!",
			max_length: "Field must be max 12 caracters long!",
			matches:  "Field must match other field!",
			valid_email: "Email must be valid address!"
		}
	});
});
Sto se tice same forme ona bi trebala ovako da izgleda:
(obratite pažnju na rules tag i kako on izgleda)

HTML kôd:
<form action="#" name="frmTest" id="frmTest" method="post">
	<table celpadding="5" cellspacing="0" border="0" width="800">
		<tr>
			<td valign="top">Name</td>
			<td valign="top">
				<input type="text" name="name" id="name" value="" style="border: 1px solid #000;" rules="required" />
				<div class="msg"></div>
			</td>
		</tr>
		<tr>
			<td valign="top">Password</td>
			<td valign="top">
				<input type="password" name="password" id="password" value="" style="border: 1px solid #000;" rules="required|min_length[5]|max_length[12]|alpha_numeric" />
				<div class="msg"></div>
			</td>
		</tr>
		<tr>
			<td valign="top">RePassword</td>
			<td valign="top">
				<input type="password" name="repassword" id="repassword" value="" style="border: 1px solid #000;" rules="required|min_length[5]|max_length[12]|alpha_numeric|matches[password]" />
				<div class="msg"></div>
			</td>
		</tr>
		<tr>
			<td valign="top">Email</td>
			<td valign="top">
				<input type="text" name="email" id="email" value="" style="border: 1px solid #000;" rules="valid_email" />
				<div class="msg"></div>
			</td>
		</tr>
	</table>
	<div><input type="submit" value="Submit Form" /></div>
</form>
NAPOMENA: Svaki objekat koji je disabled je ujedno izostavljen iz validacije iako ima rules tag.

To je za sad to, nadam se da ću uspeti da napišem bolji help, a do tada skinite projekat sa github-a tamo ima i primer kompletnog html-a.

Poslednja izmena od erazor : 09. 05. 2012. u 13:52.
erazor je offline   Odgovorite uz citat