如果输入为空，则不提交搜索表单答案

【问题标题】：Not submitting the search form if the input is empty如果输入为空，则不提交搜索表单
【发布时间】：2013-10-16 08:12:14
【问题描述】：

我有一个搜索表单，但被一件小事困住了，问题是：

如果输入字段为空，则不允许提交表单

请建议使用 jQuery 或 php 最有效的方法。

提前谢谢你。

快乐编码

<!--Search form-->
<div id="searchbar">
    <form method='GET' action='search.php'>
<input type="text" placeholder="Search Database" name="searchkey" id="searchkey" />
</form>
</div>

【问题讨论】：

你可以使用if(empty($_GET['search_field'])){ die("Field required"); } else { // search code }影响的东西
感谢您的建议，我按照建议在输入标签中添加了一个“必需”，它起作用了！

标签： php jquery forms search

【解决方案1】：

原码：

<!--Search form-->
<div id="searchbar">
  <form method='GET' action='search.php'>
    <input type="text" placeholder="Search Database" name="searchkey" id="searchkey" />
  </form>
</div>

编辑代码：

<!--Search form-->
<div id="searchbar">
  <form method='GET' action='search.php'>
    <input type="search" placeholder="Search Database" name="searchkey" id="searchkey" requierd />
  </form>
</div>

只需在搜索框的输入元素中添加属性'required'就可以了。这2件事是在HTML 5中添加的，即type='search'和required。其次，要启用此功能，您的浏览器需要更新到最新版本。

【讨论】：

谢谢！这个解决方案是最简单的。像魅力一样工作！
应该注意required 属性是一个HTML5 功能，在不支持HTML5 的浏览器和设备中不起作用。因此，此功能可能在某些设备/平台上不起作用.. 请参阅与浏览器兼容的 HTML5 功能列表en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML_5%29
required 属性的问题是Safari不支持它，所以我不会依赖它。 w3schools.com/tags/att_input_required.asp

【解决方案2】：

将 tis 代码放在您的 html 或 php 页面的头部。希望这可能对您有所帮助... :)

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $( document ).ready(function() {
        input_value = $.trim($('#searchkey').val());
        if(input_value == ''){
           alert('Enter some value');
           return false;  //Does not submit the form 
        }else{
          //perform your code if it should not be empty. 
       }
    });
</script>
</head>

$.trim() 函数从提供的字符串的开头和结尾删除所有换行符、空格（包括不间断空格）和制表符。如果这些空白字符出现在字符串的中间，它们会被保留。

【讨论】：

【解决方案3】：

 <div id="searchbar">
<form method='GET' action='search.php' onsubmit="return validate()" >
    <input type="text" placeholder="Search Database" name="searchkey" id="searchkey"/>

   <input type="submit" value="submit">
</form>
</div>

<script type="text/javascript">
 function validate()
 {
    if(document.getElementById('searchkey').value == "")
        {
            alert("fill db");
            return false;
        }
}

</script>

【讨论】：

【解决方案4】：

您应该在提交时检查搜索框的值

$(document).ready(function() {
  $('form').submit(function(e){
    if($.trim($('#searchkey').val()) == ""){
        alert("please enter search value");
        return false;
    }
  });
});

【讨论】：

【解决方案5】：

试试下面：

$(function(){
$("#search_data").submit(function() {

    if($.trim($("#searchkey").val()) != '')
        return true;

    return false;
});
});

【讨论】：

【解决方案6】：

html

<div id="searchbar">
        <form method='GET' action='search.php'>
    <input type="text" placeholder="Search Database" name="searchkey" id="searchkey" />
    </form>
    </div>

脚本

$(document).ready(function(){
$(form).submit(function(){

if( $.trim($("#searchkey").val()) == "")
{
return false; // if in input no value then form not submit
}
return true;
});


});

参考submit和trim

【讨论】：

【解决方案7】：

使用 .submit() 处理程序

<div id="searchbar">
<form method='GET' action='search.php' id='formdata'>
<input type="text" placeholder="Search Database" name="searchkey" id="searchkey" />
<input type="submit" value="search" id="search">
</form>
</div>

$(document).ready(function()
$( "#formdata" ).submit(function( event ) {
//alert( "Handler for .submit() called." );
 if($('#searchkey').val() === ''){
    event.preventDefault();  
    }
    else {
    alert($('#searchkey').val());
    } 

  });
});

我在第二个答案中包含了一个额外的提交按钮

<div id="searchbar">
<form method='GET' action='search.php'>
<input type="text" placeholder="Search Database" name="searchkey" id="searchkey" />
<input type="submit" value="search" id="search">
</form>
</div>

<script type="text/javascript" src="script/jquery.js"></script> //include jquery.js
<script type="text/javascript">
$(document).ready(function(){
    $('#search').on('click',function(){
          if($.trim($('#searchkey')).val() == '')
         {
          alert("No search Keyword"); 
          return false;
         }
        else {
          alert("search Keyword"); 
          return true;
        }

    })
});
</script>

我已使用 trim() 函数删除搜索字符串开头和结尾的空格

<div id="searchbar">
<form method='GET' action='search.php' id='formdata'>
<input type="text" placeholder="Search Database" name="searchkey" id="searchkey" />
<input type="submit" value="search" id="search">
</form>
</div>

<script type="text/javascript" src="script/jquery.js"></script> //include jquery.js
<script type="text/javascript">
$(document).ready(function(){
    $('#formdata').submit(function(){
     if($.trim($('#searchkey').val()) == '')
     {
       alert("No search Keyword");
       return false;
     }
    else 
    {
     alert($('#searchkey').val());
     return true;
    }     
  })
});
</script>

【讨论】：

【解决方案8】：

你可以只使用required属性

<input type="text" placeholder="Search Database" name="searchkey" id="searchkey" required="required"/>

【讨论】：