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

【问题标题】：Input field should not submit if empty after button click如果按钮单击后为空，则输入字段不应提交
【发布时间】：2015-10-14 03:03:58
【问题描述】：

我有一个搜索字段，用户只能输入 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 框架。

【问题讨论】：

你能提供一个jsfiddle吗？
请包含相关代码。如按钮的点击事件
我没有任何点击事件。我认为pattern 属性会显示错误消息。
请给出相关代码.. 上面的代码没有创建所需的输出
提供type="submit" attr 到搜索按钮

标签： javascript php jquery css input

【解决方案1】：

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

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

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

然后删除：

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

【讨论】：

【解决方案2】：

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

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

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

同时为您的搜索按钮提供type='submit' 属性。

【讨论】：