Form not submitting when pressing the 'enter' ('Go') key on iOS or Android keyboard

[rvanbaalen]

See title.

iOS 7.1.1
Android 4.3 (Galaxy S4)
Android 4.2.1 (Galaxy S3 mini)

Ionic nightly-1768

[adamdbradley]

Thank for creating the issue. I have it fixed in the keyboard branch and will be merging it into master soon, but will leave this open until I do.

[adamdbradley]

Would you be able to test this out on nightly? Thanks
ae3318a08154

[cbruun]

This does not quite work yet. Tested with 1.0.0-beta.1-nightly-1839 on Android 4.4, iOS 7.1 and latest Chrome.

Our app has 3 forms that can be submitted. Currently only 1 works. All three worked with Beta 1.

[adamdbradley]

@casperbruun How are each of the forms created? Does the form element use the action attribute? What are the attributes on the submit button? Are you using just form posts or ng-submit? Would you be able to provide samples of the forms that do not work? Thanks

[mlynch]

Just a thought: do you have a button with type="submit", or are you using
?

On Tue, Apr 29, 2014 at 8:44 AM, Adam Bradley notifications@github.comwrote:

@casperbruun https://github.com/casperbruun Could how are each of the
forms created? Does the form element use the action attribute? What are the
attributes on the submit button? Are you using just form posts or
ng-submit? Would you be able to provide samples of the forms that do not
work? Thanks

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1195#issuecomment-41677069
.

[rvanbaalen]

Hi @adamdbradley We're almost 10 beta releases further (I'm running the beta 11 now) and I can confirm that this is still an issue. Any news on the matter?

My form's code:

<ion-content
    class="has-header padding"
    scroll='true'>

    <img src="images/logo-large.png" width="200" class="centered-block nw-logo" />

    <form
        novalidate
        name="LoginForm"
        class="fm-form"
        ng-submit="authenticateUser(user)">
        <div class="list list-inset">
            <div class="item item-divider fm-error text-center" ng-if="formError.message">{{ formError.message | translate }}</div>

            <label class="item item-input">
                <input
                    type="tel"
                    placeholder="{{ 'LABEL.CARDNUMBER_LONG' | translate }}"
                    ng-class="{error: formError.cardnumber}"
                    ng-model="user.cardnumber"
                    required>
            </label>
            <label class="item item-input">
                <input
                    type="password"
                    placeholder="{{ 'LABEL.PIN' | translate }}"
                    ng-class="{error: formError.pin}"
                    ng-model="user.pin"
                    ng-pattern="/^[0-9]+$/i"
                    required>
            </label>
        </div>

        <div class="row">
            <div class="col col-50 col-offset-25">
                <button
                    class="button nw-confirm button-outline button-block button-energized icon-right ion-chevron-right"
                    ng-click="clearFormError()"
                    ng-disabled="!LoginForm.$valid">
                    {{ 'BUTTON.LOGIN' | translate }}
                </button>
            </div>
        </div>
    </form>
</ion-content>

[rvanbaalen]

My bad. When using @mlynch's suggestion, replacing button for input[type='submit'], it does submit when hitting 'go'.

That's also a semantically better alternative than using <button> to trigger a submit.

[fredtma]

Not sure if this is related but i was not able to submit with ionic-v1.0.0-beta.11.
The issue was using the input attribute require <input type=text require > if you are using this with HTML5 validation the form will not submit and you won't see any error message because ionic css removes the styling error msg.
Rather use ng-required