Question

我有一个input框，用户可以在其中输入他们的Zipcode以查看他们的区域是否被覆盖：

<form method="" action="">
    <input id="zipcode" type="text" />
    <p>Enter ZIP Code</p>
</form>

然后我用jQuery检查邮政编码列表的内容：

var zipcodelist = ['12345','90210','12346','12347'];

function validateZipCode() {
  return $.inArray($('#zipcode').val(), zipcodelist) > -1;
  //true means the zip code is in the list, false it is not
}


  $('#zipcode').keyup(function() {
      if( $('#zipcode').val().length == 5 ) {              
        if (!validateZipCode()) {
              // sorry, zip code is not allowed
              $('#zipcode').addClass('red');
              $('p').text('Zipcode not found in the list.');
        } else {
              // this zip code is allowed
              $('#zipcode').removeClass('red');
              $('p').text('Zipcode was found in the list!');
        }
     }
  });

根据它是否匹配，<p></p>内的文字会立即改变，这一切都正常，但我的问题是：

如何阻止输入提交？当按下回车键时，表单提交并页面刷新，我想阻止它发生，只允许输入文本但不提交。

我删除了其他地方建议的名称属性，但是当按下回车键时页面仍然重新加载。

非常感谢任何帮助。

示例：http://jsfiddle.net/3a98f/2/

Answer 1

该表单似乎没有用处（但不会提交更少），我删除它或用div替换它

<div>
    <input id="zipcode" type="text" />
    <p>Enter your ZIP code</p>
</div>

Answer 2

您可以通过捕获和阻止submit事件来阻止表单提交。让我们将您的表单标识为“zipform”：

<form method="" action="" id="zipform">

现在我们可以附加事件处理程序：

$(function() { // DOM-ready handler
    $('#zipform').submit(function(e) {
        e.preventDefault();
    });
});

Answer 3

为什么需要表格？你不能只在onChange事件中使用输入字段吗？

<input id="zipcode" type="text" onChange="validateSubmission()" />
<p>Enter ZIP Code</p>

你可以使用纯JS来检查zipCode并修改＆＃34; p＆＃34;元件。

防止输入提交

3 个答案: