Jquery Form Validator

Formlarımızda yer alan bölümlerin eksiksiz ve uygunbir şekilde kullanıcı tarafından doldurulup doldurulmadığını post edildikten sonra kontrol edebileceğimiz gibi, kullanıcı formu doldururken de kontrol edebiliriz. Bu örneğimizde kullanıcı verileri girip onaylamadan önce formda boş veya yalnış bir veri varmı kontrol edeceğiz.

Javascript Kodlarımız:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

$.validator.addMethod("email", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
}, "Geçerli bir eposta adresi giriniz.");

$.validator.addMethod("username",function(value,element){
return this.optional(element) || /^[a-zA-Z0-9._-]{3,16}$/i.test(value);
},"Kullanıcı adı 3-15 karekter olmalıdır.");

$.validator.addMethod("password",function(value,element){
return this.optional(element) || /^[A-Za-z0-9!@#$%^amp;*()_]{6,16}$/i.test(value);
},"Şifre 6-16 karekter olmalıdır.");

// Validate signup form
$("#signup").validate({
rules: {
email: "required email",
username: "required username",
password: "required password",
},
});

});
</script>

Css kodlarımız:


<style>
*{ margin:0px;
padding:0px;
}
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;

}
input
{
width:220px;
height:25px;
font-size:13px;
margin-bottom:10px;
border:solid 1px #333333;

}
label.error
{

font-size:11px;
background-color:#cc0000;
color:#FFFFFF;
padding:3px;
margin-left:5px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
</style>

Html kodlarımız:


<body>
<div align="center">
<div style="width:650px; margin-top:20px" align="left">
<div style="margin-left:10px">
<form method="post" action="jqueryregthank.html" name="signup" id="signup">
<b>Email</b><br />
<input type="text" name="email" id='email'/><br />

<b>UserName</b><br />
<input type="text" name="username" id="username" /><br />
<b>Password</b><br />
<input type="password" name="password" id="password" /><br /><br />
<input type="submit" value=" Tamam " name='SUBMIT' id="SUBMIT"/>
</form>
</div>
</div>
</div>
</div>
</body>

Proje dosyaları

Örnek Uygulama

2 thoughts on “Jquery Form Validator

  • Arkadaşım çalışmaların çok hoş ellerine sağlık.Ama bu örneğin de Türkçe karakterlerde sorun çıkarır düzeltirsen daha yararlı olacağına eminim.
    İyi Çalışmalar

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir