搜索字段为空时如何防止提交搜索表单？

Question

如果搜索框为空，则下面的代码将禁用搜索按钮。 当将搜索按钮的输入类型设置为submit则既不提交也不输入键盘上的Enter键，而是提交空白表格，但是当我将输入类型更改为button并将光标置于输入字段中并按Enter按钮时，即使张贴了空白表格也导致重新加载页面。 当搜索字段为空时，如何防止在按Enter键时提交搜索表单？

<form action="search.php" method="post">
<input type="text" class="search" placeholder="search here"/>
<input type="submit" class="Button" value="search"/>
</form> 

<script>
$(document).ready(function(){
$('.Button').attr('disabled',true);
$('.search').keyup(function(){
if($(this).val().length !=0)
    $('.Button').attr('disabled', false);            
else
    $('.Button').attr('disabled',true);
 })
});
</script>

Answer 1

为表单提交添加事件监听器

$('form').submit(function(e){
    // check logic here
    if ($('.search').val().length < 1)
       e.preventDefault()
});

如果没有值，则e.preventDefault将避免提交表单

否则，表格将正常提交

Answer 2

你可以这样尝试

$('form').submit(function(e){
    if ($('.search').val().length<=0)
        return false;
});

Answer 3

这是经过一些修改的代码：

JsFiddle演示

 $(document).ready(function(){ // By default submit is disabled $('.Button').prop('disabled', true); $('.search').keyup(function() { if($(this).val().length !=0 ) { $('.Button').prop('disabled', false); } else { $( ".search").focus(); $('.Button').prop('disabled', true); e.preventDefault(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="search.php" method="post"> <input type="text" class="search" placeholder="search here"/> <input type="submit" class="Button" value="search"/> </form> 

JsFiddle演示

Answer 4

如果要更改disabled则应使用prop而不是attr

$(function() {
  $('.Button').prop('disabled', true);
  $('.search').keyup(function() {
    $('.Button').prop('disabled', !$(this).val());
  });
});