Must click submit button twice for submitting form

[drq]

Hi
I m using Alcapa2 for checking the power of the framework…
I saw that in a form there is this problem:

when I change a invalid text in a valid text and sudden I click on the submit button I must click 2 times for sending the form to the server (not just once )!!

It is possible to correct this problem ?

[drq]

Hey,

How did you implement the submit button?

Did you add your own submit handler?

Yong

[publicocean0]

<script type="text/javascript"> $(function() { Alpaca.setDefaultLocale("it_IT"); $("div[id='form_1']").alpaca({ "schema": { "type":"object", "properties": { "username": { "type":"string", "title":"Username", "required":true, "pattern":"^[a-zA-Z0-9_]+$" }, "password": { "type":"string", "title":"Password", "required":true, "pattern":"^[a-zA-Z0-9_]+$" } } }, "options":{ "renderForm":true, "form":{ "attributes":{ "action":"@_CURRENT_URI", "method":"post" }, "buttons":{ "submit":{} } }, "fields": { "username": { "size": 20, "helper": "Please enter your username" }, "password": { "size": 20, "helper": "Please enter your password" } } }, "data": { "username": "{$username}", "password": "{$password}" }, "view" :{ "fields": { "/username": { "messages": { "invalidPattern": "Invalid Age (Must be a number) !" } } } }, "postRender": function (renderedField) { var form = renderedField.form; if (form) { form.registerSubmitHandler(function(e) { return (renderedField.isValid(true)) ; }); } } }); }); </script>

[publicocean0]

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 ...

[drq]

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.

[publicocean0]

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.

[publicocean0]

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

[publicocean0]

another interesting help: see this page

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

[drq]

How about this solution

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

[publicocean0]

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.

[drq]

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

[abdessamadely]

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