jquery - 使用enter提交时AJAX表单提交

Question

我有一位设计师坚持要求通过按 Enter 键提交单个表单字段、AJAX 发布的帖子以及 Fancybox 呈现的响应。

问题是return false并没有阻止页面的提交。

我在那里做错了什么？

<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

return false 需要直接在 submit 处理程序中执行，如下所示:

$('#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;
});

在服务器响应返回之前，您的 success 处理程序不会运行，因此您的函数实际上为该 else 语句返回 undefined。 ..并且里面的 return false 没有任何效果。像上面一样将其直接放入 submit 处理程序中将执行您想要的操作，从而阻止表单提交。

<小时/>

更干净一点的是 event.preventDefault() ，通过在此处添加事件参数:

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

并将 return false 替换为

e.preventDefault();