Yii2: It is not able to submit form by typing enter key on text field.

[nurbeknurjanov]

I found bug.
If activeform doesnt content the submit button,
it is not able to submit form by typing enter key on text field.

Even if I set validateOnSubmit true.

I think it not normal, cause typing the enter key on text field it should submit the form, even if there is no submit button.

Is this a bug?

[samdark]

Probably. Is it reproduceable with simple forms?

[nurbeknurjanov]

Simple form should work, but yii2 active form doesn't.
I think active form shouldn't depend if there exists submit button or not.
It should submit the form anyway, just when you type the enter on text field.
I tested it well and I am sure it is bug.

[nurbeknurjanov]

It not very big bug, I can make event with $form.yiiActiveForm('submitForm')
But it should work by default I think.

[sdlins]

Hi @nurbeknurjanov

Have you tested in more than one browser? I already had a similar problem but it was a browser issue, not my code (dont remember which browser, probably IE, and it was more than 5 years ago!)

[nurbeknurjanov]

I checked again and it is the same. I am sure. I checked in modern browsers.
Remove the submit button from you active form. then type the enter key in any of your text field.
Then you will see, that form is not submitting.

[SilverFire]

The problem is not Yii2-related. The plain form without a submit button will never submit on Enter key. Check out this SO question

[nurbeknurjanov]

Deal SilverFire, could you be carefull,
Here is a plain form with only text field in.
And typing enter on text field it sends form. It is a standart as anyone knows,

Could you check it if you dont belive me,
<?php if(isset($_POST['text'])) echo $_POST['text']; ?> <form action="" method="post"> <input type="text" name="text"> </form>
thank you.

[samdark]

I confirm that submitting on pressing enter is usual browser behavior for plain forms. I think it worth changing in active form JS.

[SilverFire]

Confirm too

[arogachev]

I investigated this problem in details.

@nurbeknurjanov First of all, the form in your example contains only one text field. If you add even one more field, it won't work:

Here is an example in plain PHP:

<?php

if (isset($_POST['text'])) {
    echo "text - " . $_POST['text'] . "\n";
}

if (isset($_POST['text1'])) {
    echo "text1 - " . $_POST['text1'] . "\n";
}
?>

<form action="" method="post">
    <input type="text" name="text">
    <input type="text" name="text1">
</form>

Tested with the latest (at the moment of writing) Mozilla Firefox 50.0 and Google Chrome 54.0.2840.99 m - if you press Enter, nothing will happen.

So, as you can see it's not Yii2 related.

But, back to Yii2. Let's say we have the following form:

<?php

namespace app\models;

use yii\base\Model;

class ContactForm extends Model
{ 
    public $message;

    public function rules()
    {
        return [
            ['message', 'required'],
        ];
    }
}

and related ActiveForm with enabled client validation and without submit button for rendering it:

<?php $form = ActiveForm::begin(); ?>

<?= $form->field($model, 'name') ?>    

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

Pressing Enter will first trigger required client-side validator and if you fill something - then it will submit the form without any problems.

Adding any additional fields, for example name makes impossible to submit form using Enter.

Hovewer, if submit button exists in the form, Enter can be used for submission when one of text inputs has focus (regardless of fields amount). It works for both plaing PHP and Yii2 (I tested with 2.0.6. and 2,0,10 using latest code from master branch). If enableClientValidation is true then obviously client validation will be triggered first and you need to correctly fill all fields before you can submit form.

Bottom line. Submitting form by pressing Enter when text input has focus works if:

• form has submit button;
• form has no submit button and has only one input with type text.

At least it's correct for Firefox and Chrome.

I found this SO answer useful.

If you still want this, there are some workarounds using CSS, example can be found in SO question mentioned by @SilverFire or JavaScript / JQuery, example.

Note that there can be conflicts with keypress of Enter in the whole form and going to next line in textarea elements. For regular text inputs it should work.

[arogachev]

Should it nevertheless be included in yii.activeForm.js as a feature?

[SilverFire]

@arogachev thank you for a good investigation!

It's not a popular use case and there are workarounds, so IMO we should not increase complexity of yii.activeForm.js.

Considering that it's not a Yii2 problem from the beginning and nobody except @nurbeknurjanov reported the same for more than 1 year, I'm closing this issue.

[nurbeknurjanov]

Thank you guys. I really appreciate you.