validate + listener + slide down panel

Question

Nous avons deux éléments de formulaire, seulement. Ils sont pour les numéros. Si numebrs correspond (en utilisant validate) alors je veux qu'un panneau de diapositives (div) s'ouvre.

Aucun bouton ou lien d'ancrage.

Les problèmes que je trouve, provoquent le glissement vers le bas du panneau, après le succès de la seconde correspondance de champ. Je ne veux pas que l'utilisateur clique loin du deuxième champ d'entrée, plutôt écoute pour le match d'événement, est succès alors div est révélé.

Si elles ne correspondent pas ou si l'utilisateur modifie les entrées, le div se ferme.

................... Voici donc du code.

<input id="mobile1" name="mobile1"> 
<input id="mobile2" name="mobile2"> 

Validation:

$(document).ready(function(){ 
    $("#form").validate({ 
     rules: { 
      mobile1: "required", 
      mobile2: { 
       equalTo: "#mobile1" 
      } 
     } 
    }); 
}); 

curseur, semble bien être une multitude de versions différentes que nous pouvons utiliser, bascule et glisser à la fois par le ressort jQuery à l'esprit.

Mon problème est que je souhaite que l'écouteur d'événement déclenche le panneau coulissant, à partir du 2ème champ de saisie. Sans que l'utilisateur doive cliquer sur quoi que ce soit ailleurs. Alors, comme ils entrent dans le deuxième champ d'entrée .. dès qu'il correspond, "vivre" le curseur s'ouvre.

Toute aide appréciée.

Ok avec Davids aide, c'est ce que j'ai jusqu'à présent:

Validation:

$(document).ready(function(){ 
    $("#bugmeform").validate({ 
     rules: { 
      mobile1: "required", 
      mobile2: { 
       equalTo: "#mobile1" 
      } 
     } 
    }); 
}); 

mention de code jQuery Handler ci-dessous

$("#mobile2").bind('keyup', "paste", function() { 
    if ($("#mobile1").val() == $("#mobile2").val()) { 
     $("#slider").animate({ 
      width: "70%", 
      opacity: 0.4, 
      marginLeft: "0.6in", 
      fontSize: "3em", 
      borderWidth: "10px" 
     }, 1500); 
    }); 

Form élément ressemble: mobile 1

<input id="mobile1" name="mobile1" class="small" size="12" type="text" onkeydown="return (event.ctrlKey || event.altKey 
       || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
       || (95<event.keyCode && event.keyCode<106) 
       || (event.keyCode==8) || (event.keyCode==9) 
       || (event.keyCode>34 && event.keyCode<40) 
       || (event.keyCode==46))" 
       class="medium" onKeyPress="return numbersonly(event, false)" onKeyDown="limitText(this.form.mobile1,this.form,10);" 

onKeyUp = "limitText (this.form.mobile1, this.form, 10);" maxlength = "10" />

mobile 2

<input id="mobile2" name="mobile2" class="small" size="12" type="text" onkeydown="return (event.ctrlKey || event.altKey 
       || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
       || (95<event.keyCode && event.keyCode<106) 
       || (event.keyCode==8) || (event.keyCode==9) 
       || (event.keyCode>34 && event.keyCode<40) 
       || (event.keyCode==46))" 
       class="medium" onKeyPress="return numbersonly(event, false)" onKeyDown="limitText(this.form.mobile2,this.form,10);" 

onKeyUp = "limitText (this.form.mobile2, this.form, 10);" maxlength = "10" />

La Div Element Je souhaite animer:

<div class="clearfix"></div> 
<div id="slider"> 

Bonjour tout le monde </div>

Thats à son sujet.

Answer 1

Peut-être quelque chose comme:

$('#secondInput').keyup(
    function(){ 
     if ($('#firstInput').val() == $('#secondInput').val()) { 
      $('#slider').animate({/* slide into view */}, 500); 
     } 
    });