Must click submit button twice for submitting form about alpaca HOT 11 CLOSED

Hey,

How did you implement the submit button?

Did you add your own submit handler?

Yong

from alpaca.

from alpaca.

i saw also in your examples in the website there is the same problem ....
the first click call the validation , the second one the submission ...

but if you click in the submit button i should validate and submit on the fly ...

from alpaca.

The root cause of the issue is that when Alpaca did the validation and found out the field was valid, it removed the error message as well as the red box around the field. This made the whole field shift upwards. The validation is triggered on the blur event which is fired before the click event.

That is why it wouldn't consider the click was on the submit button since the button was moved upwards. If the submit doesn't get the click event, the custom submit handler will never get invoked.

Actually if you click on the top edge of the submit button, you may just need one click.

There are a few ways to fix it. One easy way is to make the button bar at the fix location. Or we can add delay to the blur handler. But none of them is a solid solution.

I will do more research and find a better fix.

from alpaca.

Maybe the reason is that the click event is async and so it can occur before then the validation event related with another event (on focus maybe???). I think you might force to call validation subroutine also in on submit .... You can add a variable for keeking the information of the last valitation for not calculate twice the validation.

from alpaca.

Else maybe there is also this mor elegant solution : http://stackoverflow.com/questions/7721689/how-to-set-the-order-or-priority-of-functions-call-in-jquery-or-javascript ... but i never used it. :) i hope to have been useful

from alpaca.

another interesting help: see this page

http://stackoverflow.com/questions/7917391/how-to-bind-simultaneous-events-with-jquery

from alpaca.

How about this solution

http://www.alpacajs.org/examples/forms/login/localized-login-form.html

from alpaca.

Ok thanks this could be a work around.
Anyway i advice in the future to refactor the framework for handling directly this problem: by using 2 click instead 1 could create strange situation in complex form where a developer use custom logic.

from alpaca.

I just checked in the patch to the framework so that you won't need to add custom code in the callback.

http://www.alpacajs.org/examples/forms/login/localized-login-form.html

The patch is in Form.js

            $(v).mousedown(function() {
                var _this = $(this);
                _this.attr("button-pushed","true");
                setTimeout(function() {
                    if (_this.attr("button-pushed") && _this.attr("button-pushed") == "true" ) {
                        _this.click();
                    }
                }, 150);
            });
            $(v).click(function() {
                $(this).removeAttr("button-pushed");
            });

from alpaca.

After some trial and error, I found that I was using only oninvalid on some inputs and oninput event on others.

I don't know the actual issue, but I made it work by adding both oninvalid and oninput events, on each input.

Example:

fullname.addEventListener("invalid", function() { if (fullname.validity.valueMissing) { fullname.setCustomValidity("custom required msg"); } else { fullname.setCustomValidity(""); } });

fullname.addEventListener("input", function() { fullname.setCustomValidity(""); });
I wish it does help someone

from alpaca.