單擊按鈕后為空，則不應提交輸入字段

Question

我有一個搜索字段，用戶只能輸入2個或更多字符：

<?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鍵，它將顯示以下內容：

但是，如果我按下該搜索按鈕，它將因為錯誤而無法重定向到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