API: form submitted twice (two XHR requests)

[dreaming-augustin]

There is no example within the documentation on how to combine form AJAX API https://semantic-ui.com/behaviors/api.html#response-callbacks with form validation https://semantic-ui.com/behaviors/form.html#/examples

After much searching, I finally found a way to combine both in a way that was apparently working. But now, I notice that pressing enter (as opposed to clicking the 'submit' button) will submit the form twice via XHR.

I will post a test case. Meanwhile, could a full working example combining form validation + ajax be posted within the documentation?
Thanks.

[dreaming-augustin]

For the record, I found several issues referring to the same symptom: XHR being fired twice:

Bug with Api when using with form (makes 2 requests): https://github.com/Semantic-Org/Semantic-UI/issues/4298 . The sample code provided there looks like mine, with both .api() and .form() being attached to the same form element.

Form + api is making 2 requests https://github.com/Semantic-Org/Semantic-UI/issues/4161 by the same user, who for some reason closed the issues without explanation.

[API] PUT Method fires twice https://github.com/Semantic-Org/Semantic-UI/issues/3997

Search make 2 requests!!! https://github.com/Semantic-Org/Semantic-UI/issues/3282 This issue is labelled "Needs Test Case" and closed, even though there is an included fiddle which still displays the same buggy behaviour.

[dreaming-augustin]

Here is my definition for the form :

       $('#login-form')
                .form({
                        on: 'submit',
                        debug: true,
                        fields: {
                                username: {
                                        identifier: 'username',
                                        rules     : [
                                                {type  : 'empty',
                                                prompt: 'Enter your username.'},
                                        ]
                                },
                                password: {
                                        identifier: 'password',
                                        rules     : [
                                                {type  : 'empty',
                                                prompt: 'Enter your password.'},
                                        ]
                                },
                        }
                })
                .api({
                        url: '/login',
                        method       : 'POST',
                        serializeForm: true,
                        onResponse   : function(response) {
                                console.log("onResponse");
                                console.log(response);
                        },
                        onSuccess    : function(response) {
                                console.log("success");
                                console.log(response);
                        },
                        onFailure    : function(response) {
                                console.log("failule");
                                alert(response);
                        },
                });

As I said, the form behaves when clicking the 'submit' button, but just after reloading the page, the buggy behaviour is observed when pressing 'enter' after filling in the text fields.

[dreaming-augustin]

If I remove the .form() definition above, I cannot reproduce the bug. If we have both .form() and .api() attached to the same form, then the bug occurs.

I have enabled debug: true and verbose: true for both behaviours (form and api).

Without .form(), the api console.table() has the following entries:

Extending existing data with form data
Using specified url
Querying URL
Using AJAX settings
Sending request
Adding loading state to element
Created server request
Response is not JSON, skipping validation
Removing loading state from element
Successful API Response

with .form(), the api console.table() has the following entries:

Extending existing data with form data
Using specified url
Querying URL
Using AJAX settings
Sending request
Adding loading state to element
Created server request
Interrupting previous request
Cancelling API request
Extending existing data with form data
Using specified url
Querying URL
Using AJAX settings
Sending request
Adding loading state to element
Created server request
XHR request determined to be aborted
Removing loading state from element
XHR Aborted (Most likely caused by page navigation or CORS Policy)
Response is not JSON, skipping validation

The above output should confirm the existence of a bug in the semantic-UI API.

[dreaming-augustin]

I added: keyboardShortcuts: false, to the .form() definition, and it appears to resolve the issue.

I am not sure whether the observed behaviour is intended. It appears that many users have stumbled upon this issue. However, as stated in my opening comment, there is no example in the official documentation on how to properly combine both .form() and .api(). I think a working example would be a necessary addition, with the gotcha (bug) discussed above being clearly documented.

[pbarney]

Yes, this appears to be a legitimate bug.

Semantic UI adds a keyboard shortcut of its own that submits the form when you press enter, but this submission seems to bypass the validation mechanism for some reason.

Not sure how to get around this outside of not using SUI's API behavior.

[lubber-de]

Double submit via enter key was fixed in the upcoming 2.9.0 of the community fork Fomantic-UI by https://github.com/fomantic/Fomantic-UI/pull/2038