Soumission d'un formulaire AJAX lorsque l'entrée est utilisée pour soumettre

Question

J'ai un concepteur insistant sur un seul champ de formulaire soumis en appuyant sur Entrée et le message fait par AJAX et la réponse présentée par Fancybox.

Problème: le return false n'empêche pas la soumission de la page.

Qu'est-ce que je fais mal là-bas?

<form id="home_stay_informed_form"> 
<input name="informed_email" id="home_informed_email" value="Enter your email address..." /> 
</form> 


$('#home_stay_informed_form').submit(function() { 
    var reg = new RegExp(/^\S+@\S+\.\S+$/); 
    var em = $("#home_informed_email").val(); 
    if (!reg.test(em)) { 
    alert('Please correct your email address.'); 
    $("#home_informed_email").focus(); 
    return false; 
    } else { 
    $.ajax({ 
    type: "POST", 
    url: 'listSubscribe.php', 
    data : 'email=' + em, 
    success: function(msg) { 
    $("#home_stay_informed_form_msg").fancybox({ 
    'titlePosition' : 'outside', 
    'transitionIn' : 'none', 
    'transitionOut' : 'none' 
    }); 
    $("#home_informed_email").val('Enter your email address...'); 
    return false; 
    } 
    }); 
    } 
}); 

Answer 1

Les return false doit faire dans le gestionnaire submit directement, comme ceci:

$('#home_stay_informed_form').submit(function() { 
    var reg = new RegExp(/^\S+@\S+\.\S+$/); 
    var em = $("#home_informed_email").val(); 
    if (!reg.test(em)) { 
    alert('Please correct your email address.'); 
    $("#home_informed_email").focus(); 
    } else { 
    $.ajax({ 
     type: "POST", 
     url: 'listSubscribe.php', 
     data : 'email=' + em, 
     success: function(msg) { 
     $("#home_stay_informed_form_msg").fancybox({ 
      'titlePosition' : 'outside', 
      'transitionIn' : 'none', 
      'transitionOut' : 'none' 
     }); 
     $("#home_informed_email").val('Enter your email address...'); 
     } 
    }); 
    } 
    return false; 
}); 

Votre gestionnaire success ne couriez pas jusqu'à ce que la réponse du serveur revient, de sorte que votre fonction est en fait de retour undefined pour cette déclaration else ... et que return false à l'intérieur n'a aucun effet. Le mettre dans le gestionnaire submit directement comme il est ci-dessus fera ce que vous voulez, en empêchant le formulaire de soumettre.

---

Un peu plus propre serait event.preventDefault(), en ajoutant le paramètre d'événement ici:

$('#home_stay_informed_form').submit(function(e) { 

et le remplacement return false avec

e.preventDefault();