[AJAX] Déplacement + Vérification données d'un champs du formulaire

Bonjour,

J'aurais besoin d'un peu d'aide concernant la mise en place d'une vérification d'un champs de mon formulaire. J'aimerais que, dès que l'utilisateur passe à un autre champ de mon formulaire, cela vérifie instantanément le champ qu'il vient de quitter. J'ai regarder un peu sur internet et cela ce fait apparemment avec les fonctions .focus() et .blur().

Voilà mon formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<form id ="ajout" role="form" method="post" action="ajout.php" enctype="multipart/form-data">
        <div id="titreform" class="form-group">
            <label class="control-label" for="titre">Titre</label>
            <input type="text" class="form-control" id="titre" placeholder="Titre" name="titre">
        </div>
        <div class="form-group">
            <label for="path">Nom du fichier sur le serveur : </label>
            <input type="text" class="form-control" name="path" placeholder="Nom du fichier sur le serveur">
        </div>
        <input type="hidden" name="formajout"/>
        <div class="form-group">
            <label for="poster">Image</label>
            <input type="file" name="poster"/>
        </div>
        <div class="form-group">
            <label for="pathSousTitres">Sous-titres</label>
            <input type="file" name="pathSousTitres"/>
        </div>
        <button type="submit" class="btn btn-default">Ajouter</button>
    </form>

Et voilà mon code JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<script type="text/javascript">
    $(document).ready(function(){
        $(":submit").attr("disabled", true);
        $("input").focus(function(){ 
            var info_form=$(this).next(".info"); 
            info_form.empty(); 
 
            $("input").blur(function(){ 
                var name=($(this).attr("name")); 
                var value=($(this).attr("value")); 
                var info_form=$(this).next(".info"); 
                if(value==null) 
                { 
                    info_form.append("Obligatoire"); 
                } 
                else if(name=="titre") 
                { 
                    $.ajax({ 
                        type: "GET", 
                        url: "control.php", 
                        success:function(data){ 
                            if(data==1) 
                            { 
                                info_form.append("Un compte avec le même pseudo existe déja"); 
                                $(":submit").attr("disabled", true);
                            } 
                            else 
                            { 
                                info_form.append("Valide"); 
                                $(":submit").removeAttr("disabled");
                            } 
                        } 
                    }); 
                }
            }); 
 
        });
</script>

Dans control.php, pour l'instant, je fais simplement un echo '1'.
Donc le problème, bah ça ne fait rien...
Je souhaite uniquement vérifier le champ "titre", les autres ne sont pas obligatoires.

Merci de votre aide. :)