Bu yazımda Jquery Validation kütüphanesini kullanarak form doğrulamayı ve doğrulanan formu ajax ile submit etmeyi anlatacağım.

Öncelikle aşağıdaki adresten Jquery Validation kütüphanesini indiriyoruz;
http://jqueryvalidation.org/

1- index.html dosyası oluşturup aşağıdaki kodları giriyoruz;

<!doctype html> 
<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Jquery Validation ve Ajax Form Submit</title>
	</head>
	<body>
	<form id="example">
		<p><input type="email" id="example-email" name="example-email" placeholder="E-Posta"></p>
		<p><input type="password" id="example-password" name="example-password" placeholder="Şifre"></p>
		<button type="submit">Gönder</button>
	</form>
		
	<div id="sonuc"></div>
		
	<script src="js/jquery.js"></script>
	<script src="js/jquery.validate.js"></script>
	<script>
	$(document).ready(function(){ 
		$("#example").validate({ 
			// Doğrulama kurallarını belirliyoruz 
			rules: { 
				'example-email': { 
					required: true, // Doldurulması zorunlu 
					email: true // Geçerli bir E-posta adresi olmalı 
				},
				'example-password': { 
					required: true // Doldurulması zorunlu 
				}
			}, 
			messages: { 
				required: 'Bu alan gerekli', 
				email: 'Lütfen geçerli bir e-posta adresi giriniz' 
			},
			submitHandler: function() { 
				$.ajax({ 
					url: 'ajax.php', 
					type: 'post', 
					data: $('#example').serialize(), 
					success: function(msg) { 
						$('#sonuc').html(msg); 
					}, 
					error: function(error) { 
						$('#sonuc').html(error); 
					} 
				}); 
			} 
		}); 
	}); 
	</script> 
	</body>
</html>

2- ajax.php dosyası oluşturup aşağıdaki kodları giriyoruz;

echo 'Ajax form gönderildi';

KAYNAK KODLARI İNDİR