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!@#$%^&*()_]{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>
Form doldurulmadan Tamam butonuna basıldığında
Form verileri eksik olarak Tamam butonuna basılırsa
2 Comments
Harıkasın Tesekkurler dostum
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