单击按钮后为空，则不应提交输入字段

Question

I have a search field and user can only input 2 or more characters:

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

Now, if I hit the ENTER KEY, it will display this:

But, if I press that search button, it will redirect to the search results page with a PHP error because it doesn't receive any keyword.

So how do I prevent this from happening?

EDIT:

I put all my HTML code above. I am using Yii2 php framework.

Answer 1

$('#searchForm').submit();
Remove this code from your script. Its triggering form submit. Even tough you have validated input field with pattern, the script will trigger the form submit action.

Also provide type='submit' Attribute to your search button.

Answer 2

You're preventing the button's default behavior, and then manually calling the form's submit .

Change your button to an input[type=submit] field, and remove the code that you add an event listener to it, and everything should work as you expected:

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

And remove:

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

Answer 3

Add the disabled attribute on your button, then use your own javascript function to test if the field has input. If it does, remove the disabled attribute from the submit button.

$( '.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