Input field should not submit if empty after button click

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.

please include relevant code.such as click event of the button — guradio
– guradio, Commented Oct 14, 2015 at 3:07
I don't have any click event for this one. the pattern attribute does the error message, I think. — Ethelene Laverne
– Ethelene Laverne, Commented Oct 14, 2015 at 3:13
Please give relevant code.. Above code doesnt create the desired output — Vicky Gonsalves
– Vicky Gonsalves, Commented Oct 14, 2015 at 3:15

Buzinas · Accepted Answer · 2015-10-14 03:22:00Z

1

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

answered Oct 14, 2015 at 3:22

Buzinas

11.8k2 gold badges38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh Rutherford · Accepted Answer · 2015-10-14 03:26:29Z

1

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

answered Oct 14, 2015 at 3:26

Josh Rutherford

2,7231 gold badge19 silver badges20 bronze badges

Comments

Vicky Gonsalves · Accepted Answer · 2015-10-14 03:31:43Z

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.

edited Oct 14, 2015 at 3:31

answered Oct 14, 2015 at 3:07

Vicky Gonsalves

11.8k3 gold badges39 silver badges58 bronze badges

Collectives™ on Stack Overflow

Input field should not submit if empty after button click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related