1

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

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

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

4

8 回答 8

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

于 2013-10-09T05:49:47.887 回答
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。其次，要启用此功能，您的浏览器需要更新到最新版本。

于 2013-10-09T06:05:16.820 回答
0

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

$(document).ready(function() {
  $('form').submit(function(e){
    if($.trim($('#searchkey').val()) == ""){
        alert("please enter search value");
        return false;
    }
  });
});
于 2013-10-09T05:58:44.937 回答
0

试试下面： 

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

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

    return false;
});
});
于 2013-10-09T05:58:55.257 回答
0

使用 .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>
于 2013-10-09T07:12:54.107 回答
0

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;
});


});

参考提交和修剪

于 2013-10-09T05:50:01.187 回答
0 
 <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>
于 2013-10-09T05:57:11.547 回答
0

你可以只使用required属性

<input type="text" placeholder="Search Database" name="searchkey" id="searchkey" required="required"/>
于 2017-03-13T16:35:04.743 回答