Question

我有以下代码。

function stop() {
  $("#login_form").submit(function(e) {
    return false;
  });
}

function login() {
  var username = $("input[name=username]").val();
  var password = $("input[name=password]").val();

  if (username.length < 1) {
    alert("Please enter your username or email address.");
    stop();
  } else if (username.length > 0 && username.length < 3) {
    alert("Your username or email is incorrect.");
    stop();
  } else if (password.length < 1) {
    alert("Please enter your password.");
    stop();
  } else if (password.length > 0 && password.length < 6) {
    alert("Your password is incorrect.");
    stop();
  } else if (username.length > 2 && password.length > 5) {
    $("#login_form").submit(function(e) {
      return true;
    });
  }
}

如果我最初输入正确的值，表单会提交罚款。但是，如果“return false”仅被调用一次，那么它将不会提交。

我该如何解决这个问题？调用“return true”不起作用。

修改

我的HTML格式：

<form id='login_form' action='login.php' method='post'>
  <div id='form_item'>
    <div id='form_item_left' style='width: 40%; margin-left: -75px; font-size: 18px;'>Username or Email</div>
    <div id='form_item_right'>
      <input id='text' type='text' name='username'>
    </div>
  </div>
  <div id='form_item'>
    <div id='form_item_left' style='font-size: 18px;'>Password</div>
    <div id='form_item_right'>
      <input id='text' type='text' name='password'>
    </div>
  </div>
  <div style='height: 5px;'></div>
  <div id='form_item'>
    <div id='form_item_right'>
      <span style='display: inline-block; width: 60px;'></span>
      <input id='checkbox' type='checkbox' name='remember_me'>
      <span>Remember me</span>
    </div>
  </div>
  <div style='height: 15px;'></div>
  <div id='form_item' style='text-align: center;'>
    <input id='submit' type='submit' name='submit' value='Login'>
  </div>
</form>

Answer 1

根据我的经验，只需使用event.preventDefault();而不是返回false。

使用login（）和stop（）的设置似乎过于复杂，在这种情况下你似乎没有正确使用jQuery提交 - 你使用它的方式，它将事件处理程序绑定到提交事件，这就是它停止工作的原因 - 因为你将false返回到来自该表单的任何提交事件。

$("#login_form").submit(function (e) {    
    if(condition){
        alert("Error");
        e.preventDefault();
    } else if(condition){
        alert("Error");
        e.preventDefault();
    } else if(condition){
        alert("Success");
        // Do Something
    }
});

我认为这样的事情更接近你的需要。如果提交时出现错误，可以使用preventDefault，如果全部检出，则执行不带preventDefault的操作。

同样，请记住$("element").submit(function (e) {将事件处理程序绑定到submit事件，而不是触发提交事件。

Answer 2

好的，我终于找到了解决方法。

以下代码完美无缺。

＆＃13;

var eventhandler = function(e) {
  e.preventDefault();
}

function login() {
  var username = $("input[name=username]").val();
  var password = $("input[name=password]").val();

  if (username.length < 1) {
    alert("Please enter your username or email address.");
    $("#login_form").bind('submit', eventhandler);
  } else if (username.length > 0 && username.length < 3) {
    alert("Your username or email is incorrect.");
    $("#login_form").bind('submit', eventhandler);
  } else if (password.length < 1) {
    alert("Please enter your password.");
    $("#login_form").bind('submit', eventhandler);
  } else if (password.length > 0 && password.length < 6) {
    alert("Your password is incorrect.");
    $("#login_form").bind('submit', eventhandler);
  }

  if (username.length > 2 && password.length > 5) {
    $("#login_form").unbind('submit', eventhandler);
  }
}

＆＃13;

调用return false后，表单提交不起作用

2 个答案: