Question

我有一个搜索表单，我被困在一个小东西＆amp;问题是：

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

请使用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>

Answer 1

将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()函数从提供的字符串的开头和结尾删除所有换行符，空格（包括不间断空格）和制表符。如果这些空白字符出现在字符串的中间，则会保留它们。

Answer 2

原始代码：

<!--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'即可完成。这两件事在HTML 5中添加，即type ='search'和required。其次，要启用此功能，您的浏览器需要更新到最新版本。

Answer 3

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

Answer 4

 <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>

Answer 5

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

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

Answer 6

尝试以下内容：

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

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

    return false;
});
});

Answer 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>

Answer 8

您可以使用required属性

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

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

8 个答案: