jQuery fancy Draggable Captcha

  • jQuery fancy Draggable Captcha, 5.0 out of 5 based on 1 rating


    draggable captchaHere is a jQuery example for a captcha in a registration form. In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 into order.

    jQuery draggable captcha

    <script type="text/javascript">
            (
            function($){

                $.fn.shuffle = function() {
                    return this.each(function(){
                        var items = $(this).children();

                        return (items.length)
                            ? $(this).html($.shuffle(items,$(this)))
                        : this;
                    });
                }

                $.fn.validate = function() {
                    var res = false;
                    this.each(function(){
                        var arr = $(this).children();
                        res =    ((arr[0].innerHTML=="A")&&
                            (arr[1].innerHTML=="B")&&
                            (arr[2].innerHTML=="C")&&
                            (arr[3].innerHTML=="D")&&
                            (arr[4].innerHTML=="E")&&
                            (arr[5].innerHTML=="F"));
                    });
                    return res;
                }

                $.shuffle = function(arr,obj) {
                    for(
                    var j, x, i = arr.length; i;
                    j = parseInt(Math.random() * i),
                    x = arr[--i], arr[i] = arr[j], arr[j] = x
                );
                    if(arr[0].innerHTML=="1") obj.html($.shuffle(arr,obj))
                    else return arr;
                }

            })(jQuery);

            $(function() {
                $("#sortable").sortable();
                $("#sortable").disableSelection();
                $('ul').shuffle();

                $("#formsubmit").click(function(){
                    ($('ul').validate()) ? alert("Yeah, you are a human!") : alert("No, you are not a human!");
                });
            });
        </script>

    Enjoyed this post? Subscribe to our RSS feeds!





          


    Author: Cody
    Download: From here

    Subscribe to Site Help Web Resources Feed

    Make a donation

    Related Posts:

    GD Star Rating
    loading…

    August 17th, 2010 | Blue | 11 Comments | Tags: , , ,

About The Author

Steve

Hi I am a webdeveloper based in Brisbane, Australia. Fanatical about the internet and website code and development. Hence this site, a showcase resource site for you to get the latest greatest code , scripts , apps and demos all from the one venue.

11 Responses and Counting...

Leave a Reply

* Name, Email, and Comment are Required