Question

我有一个搜索字段，用户只能输入两个或更多字符：

<?php

use yii\helpers\Html;
use app\models\User;
use yii\helpers\ArrayHelper;
use kartik\form\ActiveForm;
use kartik\widgets\Select2;
use yii\helpers\Url;
$session = Yii::$app->session;

/* @var $this yii\web\View */
/* @var $model app\models\PayslipTemplateSearch */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="searchbox" style="padding: 0; margin-right: 0px;">  

    <?php $form = ActiveForm::begin([
        'action' => ['searchresults'],
        'method' => 'get',
        'id' => 'searchForm'
    ]); ?>

    <div class="input-group">
       <input type="text" class="form-control" name="keyword" pattern=".{2,}" title="Keyword should have a minimum of 2 characters" required>
       <span class="input-group-btn">
            <button class="btn btn-primary" type="button">&#x1f50d;</button>
       </span>
    </div>
    <span class="error">Enter at least two characters</span>

    <?php ActiveForm::end(); ?>

</div>

<style type="text/css">
.error {
  display: none;
  font: italic medium sans-serif;
  color: red;
}
input[pattern]:invalid ~ .error {
  display: block;
}
</style>

<script>
$(function(){
    $(".btn-primary").click( function(e){
        e.preventDefault();
        $('#searchForm').submit();
    });
    $('.dropdown-responsive').addClass('manageadmindd');
    $('.select2-bootstrap-append').addClass('ddcontainer');
})

// function showError(txt)
// {
//   var err = document.getElementById('error');
//   err.innerHTML = txt;
//   err.style.display = 'block';
// }
</script>

现在，如果我点击ENTER KEY，它将显示：

但是，如果我按下该搜索按钮，它将重定向到搜索结果页面，并显示PHP错误，因为它没有收到任何关键字。

那么我该如何防止这种情况发生呢？

编辑：

我将所有HTML代码放在上面。我正在使用Yii2 php框架。

Answer 1

$('#searchForm').submit();
从脚本中删除此代码。它的触发形式提交。即使您已经使用模式验证了输入字段，该脚本也会触发表单提交操作。

还为搜索按钮提供type='submit'属性。

Answer 2

您正在阻止该按钮的默认行为，然后手动调用该表单的submit。

将您的按钮更改为input[type=submit]字段，并删除为其添加事件监听器的代码，一切都应该按预期工作：

<input type="submit" class="btn btn-primary" value="&#x1f50d;">

并删除：

$(".btn-primary").click(function(e) {
  e.preventDefault();
  $('#searchForm').submit();
});

Answer 3

在按钮上添加disabled属性，然后使用您自己的javascript函数来测试该字段是否有输入。如果是，请从提交按钮中删除已禁用的属性。

$( '.my-input' ).on( 'keyup', function( e ) {
    var inputVal = $( this ).val();
    if( !!inputVal ) {
        $( '.my-submit' ).removeAttr( 'disabled ');
    } else {
        $( '.my-submit' ).attr( 'disabled', 'disabled' );

    }
});

http://codepen.io/the_ruther4d/pen/ZbXYOx

点击按钮后输入字段不应提交为空

3 个答案: