Question

我有一个简单的登录界面，其中有一个名称的文本框和一个提交按钮。运行的jquery脚本是：

$(document).ready(function() {

    $('#btnLogin').click( function() { validate() });
    $('#loginForm').submit( function() { validate() });

});

function validate() {
    if ($('#txtLogin').val() != '') {
        document.cookie = 'loginID=' + $('#txtLogin').val();
        $('#lblError').hide();
        document.location.href = 'mainmenu.aspx';
    }
    else {
        $('#txtLogin').text('');
        $('#lblError').show();
    }
}

单击按钮时可以正常工作，但按Enter键时，它不会导航到mainmenu.aspx。我正在使用Chrome跟踪它，它确实执行重定向，就像按下按钮一样，但它只是停留在同一页面上。我还在mainmenu.aspx的Page_Load函数（C＃）中设置了一个断点，但它从未到达它。

编辑::这是html

<form id="loginForm" runat="server">
    <div>

        <div class='theme login'>
            <p>Login</p>
            <input type='text' id='txtLogin' maxlength='17' />
            <div><input type='button' id='btnLogin' class='button' value='Log In' /></div>
            <div><span id='lblError' visible='false' text='*You must enter a valid username'></span></div>
        </div>

    </div>
</form>

Answer 1

在表单提交处理程序中，使用preventDefault()停止默认提交行为：

$('#loginForm').submit( function(e) { 
    e.preventDefault(); // swallow regular submit behavior
    validate(); // your stuff
    // real submit? your option
});

参考：http://api.jquery.com/event.preventDefault/

Answer 2

尝试将表单中的submit元素设置为常规按钮元素。浏览器可能会截取某些内容。

Answer 3

编辑：直接参考函数而不是匿名函数？

function validate() {
    if ($('#txtLogin').val() != '') {
        document.cookie = 'loginID='+$('#txtLogin').val();//set expire and path?
        $('#lblError').hide();
        location.href = "mainmenu.aspx"; //"submit"
    }
    else {
        $('#lblError').show();
        return false; //prevent submit
    }
}

$(function() {
    $('#btnLogin').click(validate);
    $('#loginForm').submit(validate);  
});

Answer 4

原因是当您按Enter键时仍然会发生提交。您需要在事件处理函数中返回false 取消默认行为。

function validate() {
  // ...
  return false;
}

$('#loginForm').submit(validate);
$('#btnLogin').click(validate);

Answer 5

我改变了你的一些HTML和jQuery代码。现在它将在 Enter 和单击按钮时检查并提交。

<强>的jQuery

<script type="text/javascript">
  $(document).ready(function() {
    $("form").attr("action","javascript:void();"); // No action on form submission

    $("input").keypress(function(e) {  // Capture keys pressed
      if(e.keyCode==13) {  // Enter key?
        validate();
      }
    });

    $("input:button").click(function() {  // Button clicked?
      validate();
    });
  });

  function validate() {
    if ($("#txtLogin").val()!='') {
      document.cookie="loginID="+$("#txtLogin").val();
      $("#lblError").hide();
      $("form").attr("action","mainmenu.aspx");  // Change form action
      $("form").submit();  // Submit the form
    } else {
      $("#lblError").show();
    }
  }
</script>

<强> HTML

<form id="loginForm" runat="server">
  <div>
    <div class="theme login">
      <p>Login</p>
      <input type="text" id="txtLogin" maxlength="17" />
      <div><input type="button" id="btnLogin" class="button" value="Log In" /></div>
      <div id="lblError" style="display: none;">* You must enter a valid username</div>  <!-- Error message -->
    </div>
  </div>
</form>

与按Enter键相比，按下按钮时提交行为的行为有所不同

5 个答案: