Ajax Live User Validation

Screenshots of how it works:

alt text

On the model (db.py)

#

db = DAL('sqlite://storage.sqlite')       


db.define_table('users',
                Field('name','string'))

On the view (index.html)

#

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Ajax User Validation with web2py by Martin Sagastume</title>
    <style type="text/css">
    <!--
    body { font-family:Arial,Verdana,Sans-serif; }

    input[type=text]{
        font-size:12px;
        color:#666666;
        background-color:#ffffff;
        padding-top:5px;
        width:200px;
        height:20px;
        border:1px solid #999999;
    }

    #resultbox { font-size:11px; }
    .msg { color:blue; }
    .success { color:green; }
    .error { color:red; }
    //-->
    </style>
    <script type="text/javascript" src="{{=URL(r=request,c='static',f='jquery.js')}}"></script>
    <script type="text/javascript">

    var submit = false;
    $(document).ready(function(){
        $("form").submit(function() {
            return submit;
        });
    });

    function getData(value){
        if(value != ""){
            $("#resultbox").removeClass().addClass('msg').text('Validating...').fadeIn(100);
            $.post("{{=URL(r=request,c='default',f='ajaxuserexist')}}",{username:value},function(result){
                if(result=='yes'){
                    $("#resultbox").removeClass().addClass('error').text('Username already taken').fadeTo(900,1);
                    submit = false;
                }else{
                    $("#resultbox").removeClass().addClass('success').text('Username is available for registration!').fadeTo(900,1);
                    submit = true;  
                }
            });
        }else{
            $("#resultbox").removeClass().addClass('msg').text('This field is required');
        }
    }

    </script>
</head>
<body>
    <form id="form1" method="post" action="page2">
        <label for="country">Name:</label><br />
        <input type="text" id="name" name="name" onblur="getData(this.value)" /><br />
        <div id="resultbox" class="msg"></div><br />
        <input type="submit" id="bsubmit" name="bsubmit" value="Submit" />
    </form>
</body>
</html>

On the view (page2.html)

#

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>
<strong>{{=name}}</strong>, the form has been submited ;-)
</body>
</html>

On the controller (default.py)

#

# -*- coding: utf-8 -*- 
def index():
    return dict()

def page2():
    name = request.vars.name
    return dict(name=name)

def ajaxuserexist():    
    username = request.vars.values()[0]
    query = db.users.name.like(username)
    numres = db(query).count()
    if numres > 0 :
        return 'yes'

    return 'no'

Maybe tomorrow i will make a 10min screencast with this!

P.S: Second time i try to submit this slice and it didnt work.. loosing all what i wrote =(

Comments (1)

Login to post
0
mdmcginn 14 years ago
I am new to web2py so maybe I am missing something , but it looks like you are missing a db insert in your page2 controller. Maybe something like this. def page2(): name = request.vars.name db.users.insert(name=name) return dict(name=name) Thanks for the example code.

#

#

#

#

Related slices

Comments (1)

mdmcginn 14 years ago