jQuery için Doğrulama Plugini (Validation Plugin for jQuery)

Bu derste jQuery için bir doğrulama plugini hazırladım. Ben hiçbir yerde bulamadım ve sonunda baka baka yaptığım validation plugin.

Bu derste jQuery için bir doğrulama plugini hazırladım. Ben hiçbir yerde bulamadım ve sonunda baka baka yaptığım validation plugin.


<html lang="en">

<head>



<title>jQuery validation plug-in - main </title>



<link rel="stylesheet" href="css/screen.css" />



<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>



<script>

$.validator.setDefaults({

    submitHandler: function() { alert("TEBRIKLER KAYIT OLDUNUZ!"); }

});



$().ready(function() {



    $("#commentForm").validate();



    

    $("#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: {

                    

                     color:"Red",

            firstname: "Lutfen isminizi giriniz..",

            lastname: "Lutfen soyadinizi giriniz..",

                       

            username: {

                           

                required: "Lutfen kullanici isminizi giriniz..",

                minlength: "Your username must consist of at least 2 characters",

                                 color:"Red"

            },

            password: {

                            

                required: "Lutfen sifrenizi giriniz..",

                minlength: "Sifreniz en az 5 karakter olmak zorunda",

                                color:"Red",

            },

            confirm_password: {

                            

                required: "Lutfen tekrar sifrenizi giriniz..",

                minlength: "Sifreniz en az 5 karakter olmak zorunda",

                equalTo: "Sifreniz ayni olmak zorunda..",

                                color:"Red",

            },

                        

            email: "Lutfen email adresinizi giriniz..",

            agree: "Please accept our policy",

                        color: "Red",

        }

    });



    

    $("#username").focus(function() {

        var firstname = $("#firstname").val();

        var lastname = $("#lastname").val();

        if(firstname && lastname && !this.value) {

            this.value = firstname + "." + lastname;

        }

    });



    

    var newsletter = $("#newsletter");

    

    var inital = newsletter.is(":checked");

    var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");

    var topicInputs = topics.find("input").attr("disabled", !inital);

    

    newsletter.click(function() {

        topics[this.checked ? "removeClass" : "addClass"]("gray");

        topicInputs.attr("disabled", !this.checked);

    });

});

</script>



<style type="text/css">

#commentForm { width: 500px; }

#commentForm label { width: 250px; }

#commentForm label.error, #commentForm input.submit { margin-left: 253px; }

#signupForm { width: 670px; }

#signupForm label.error {

    margin-left: 10px;

    width: auto;

    display: inline;

}

#newsletter_topics label.error {

    display: none;

    margin-left: 103px;

}

</style>



</head>

<body>







<form class="cmxform" id="signupForm" method="get" action="">

    <fieldset>

        

        <p>

            <label for="firstname">Isim</label>

            <input id="firstname" name="firstname" type="text" />

        </p>

        <p>

            <label for="lastname">Soy isim</label>

            <input id="lastname" name="lastname" type="text" />

        </p>

        <p>

            <label for="username">Kullanici ismi</label>

            <input id="username" name="username" type="text" />

        </p>

        <p>

            <label for="password">Sifre</label>

            <input id="password" name="password" type="password" />

        </p>

        <p>

            <label for="confirm_password">Sifre tekrari</label>

            <input id="confirm_password" name="confirm_password" type="password" />

        </p>

        <p>

            <label for="email">Email</label>

            <input id="email" name="email" type="email" />

        </p>

        

            

        </fieldset>

        <p>

            <input class="submit" type="submit" value="Submit"/>

        </p>

    </fieldset>

</form>



  <body background="22.jpg"/>



</body>

</html>

  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git