Foundation-sites: Abide validation statuses triggered twice.

[ghost]

Provided a simple form as the one from Foundation 5 Docs:

<form data-abide="ajax" id="myform">
    <div class="name-field">
        <label>Your name <small>required</small>
            <input type="text" name="users_name" required pattern="[a-zA-Z]+">
        </label>
        <small class="error">Name is required and must be a string.</small>
    </div>
    <button type="submit">Submit</button>
</form>

and a simple jQuery piece of code to handle abide validation

$('#myform').on('valid.fndtn.abide', function(e) {

    // Handle the submission of the form
    console.log(e);
});

THAT console.log is always fired twice!

Did any of you encountered the same issue? Any help please?
Thank You.

[diegoviola1]

Same issue here, trying to solving it.

(Edit)

"Fast fix": use "valid" event instead of "valid.fndtn.abide"

[ghost]

Yes "valid" worked for me too. But i think this the old event from version 4. Documentation should be revised.

[daylen]

+1 Also experiencing this issue. Using "valid" instead of "valid.fndtn.abide" works, but is deprecated.

[gnzandrs]

I have the same issue, but with "valid" event doesn't work for me... the second time of i execute the validation, the code is executed twice.

fix: This happen in my code because i was making a "select" tag without a default value.

Example:

I was doing:

<select required data-invalid>
        <option value="cl">Chile</option>
         <option value="ar">Argentina</option>
</select>

instead:

<select required data-invalid>
         <option value>-Select Your Country-</option>
         <option value="cl">Chile</option>
         <option value="ar">Argentina</option>
</select>

[SteveyPugs]

+1 Same issue

[rbcorrales]

+1 Same here

[roycyang]

+1 same issue and switching over to just .valid worked.

[DTwigs]

+1

[jeffclemens]

+1 . Of note, the OP and I are both using data-abide="ajax".

[AIMMOTH]

+1

[Waynezhi]

+1

[IshanUpmanyu]

+1
Also using data-abide="ajax". Also i noticed, that if i click the submit button twice, event is sent 2 times, if i click again event is generated 3 times, if i click again then 4 times and so on...

Please help, stuck on it for a long while now.

[alizadeh-amin]

This message was created automatically by mail delivery software.

A message that you sent could not be delivered to one or more of its
recipients. This is a temporary error. The following address(es) deferred:

emeil.[email protected]
Domain emeil.ir has exceeded the max emails per hour (341/300 (113%)) allowed. Message will be reattempted later

------- This is a copy of the message, including all the headers. ------
Received: from o5.sgmail.github.com ([192.254.113.10]:12956)
by vip13-233.cp.htz.privatedns.biz with esmtps (UNKNOWN:DHE-RSA-AES128-GCM-SHA256:128)
(Exim 4.82)
(envelope-from )
id 1XyHu3-0005XD-5f
for [email protected]; Tue, 09 Dec 2014 14:20:23 +0400
DKIM-Signature: v=1; a=rsa-sha1; c=relaxed; d=github.com;
h=from:reply-to:to:in-reply-to:references:subject:mime-version:content-type:content-transfer-encoding:list-id:list-archive:list-post:list-unsubscribe;
s=smtpapi; bh=XH3/bs1iAYRCQYdWD83ypN8CjTc=; b=HsXrnN0GHSUa0kRJlY
374kyLNPL2IZ8JgiMTu+JdFb3GuCqsyuqkRRH54hFon4r09wWgkcvDw/6rk4hQaM
TBGBPjxs7AOjC/FaLNNeSQxvJKj8fjqej0m2sZZ7jr1vNTJ07x4itVQWyE8T9ZdL
gh622bmKQU2anHIUxwAqWZuaQ=
Received: by filter0027p1mdw1.sendgrid.net with SMTP id filter0027p1mdw1.7932.5486CCE01C
2014-12-09 10:20:18.47731279 +0000 UTC
Received: from github-smtp2a-ext-cp1-prd.iad.github.net (github-smtp2a-ext-cp1-prd.iad.github.net [192.30.253.16])
by ismtpd-016 (SG) with ESMTP id 14a2e905468.46fc.49e11e
for [email protected]; Tue, 09 Dec 2014 10:20:18 +0000 (UTC)
Date: Tue, 09 Dec 2014 02:20:18 -0800
From: IshanUpmanyu [email protected]
Reply-To: zurb/foundation [email protected]
To: zurb/foundation [email protected]
Message-ID:
In-Reply-To:
References:
Subject: Re: [foundation] Abide validation statuses triggered twice. (#5392)
Mime-Version: 1.0
Content-Type: multipart/alternative;
boundary="--==_mimepart_5486cce243b20_61c43fd5aff732c021894c";
charset=UTF-8
Content-Transfer-Encoding: 7bit
Precedence: list
X-GitHub-Sender: IshanUpmanyu
X-GitHub-Recipient: alizadeh-amin
List-ID: zurb/foundation
List-Archive: https://github.com/zurb/foundation
List-Post: mailto:[email protected]
List-Unsubscribe: mailto:unsub+002fede55d0f1e66fa7a[e-mail],
https://github.com/notifications/unsubscribe/AC_t5fjYlDcB44NGRjV7mUboxEwhj2LCks5nVsRigaJpZM4CIcrY
X-Auto-Response-Suppress: All
X-GitHub-Recipient-Address: [email protected]
X-SG-EID: NqBfyKjLfvQtIqqLhyGdCsrPUaAH4EzjQuZrBReJ1fBXnDDZS3Nox1tfVO7qOnZlmA2jaHfDh1C8Yj
zJqLN1rio8E4IF2SnEfHJf5bxItSgWFRHcru/OM4oCKvjSggLog99ROaMFMQgORDAVVDoUJB/+VppT
K/LTKM4/kGu/ZHY=

----==_mimepart_5486cce243b20_61c43fd5aff732c021894c
Content-Type: text/plain;
charset=UTF-8
Content-Transfer-Encoding: 7bit

+1

---

Reply to this email directly or view it on GitHub:
https://github.com/zurb/foundation/issues/5392#issuecomment-66261300
----==_mimepart_5486cce243b20_61c43fd5aff732c021894c
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: 7bit

+1

—
Reply to this email directly or view it on GitHub.

----==_mimepart_5486cce243b20_61c43fd5aff732c021894c--

[chrisjimallen]

Same issue here. Changing to 'valid' did the trick. Second issue I've encountered with Abide so far, but good overall.

[maiolica]

+1

[hdra]

I believe this issue is cause because of the way jQuery's event namespacing works. Basically, triggering a valid event will fire any listener listening to valid.* events.

Because Foundation is deprecating the valid event and moving to the valid.fndtn.abide event, the current version of the code triggers both during validation, but because of the way jQuery's event works, listener for valid.fndtn.abide will fire for both valid and valid.fndtn.abide event, and since both events fired, the listener ran twice, each for both event.

The obvious solution is to simply trigger the old events during validation, and I actually have prepared a PR with this fix, but I'm not sure what the developer's intentions are, since I noticed they are triggering both versions of the events in other places as well.

[patrickgalbraith]

Also having this issue.

As mentioned earlier it is due to the way that jQuery event namespacing works.
Simple fix is to check the event namespace.

Like this:

$('form').on('valid.fndtn.abide', function(e) {
    // Fix for valid event firing twice
    if(e.namespace != 'abide.fndtn') {
        return;
    }

    // Handle form...

[hsson]

@patrickgalbraith +1 This solved it. Just remember to take 'e' as input in the function.

[chrisjimallen]

@patrickgalbraith cleanest solution I've seen yet, thanks.

[patrickgalbraith]

@hdra The fix is actually fairly simple instead of triggering the valid event like this:

form.trigger('valid').trigger('valid.fndtn.abide');

Trigger it like this:

form.trigger('valid.$').trigger('valid.fndtn.abide');

This will prevent both from triggering when listening to 'valid.fndtn.abide' but should retain the original functionality.

See this fiddle for example http://jsfiddle.net/z0qfp6yh/

[DustinJSilk]

Using just "valid" did the trick. thanks

[mikejoyceio]

Using 'valid' worked for me, too. Thanks

[TheHanna]

I'm having the same issue as @IshanUpmanyu. Is there a separate ticket for it somewhere? The solutions in this one did not resolve it. I still get multiple events triggering when I submit a form with data-abide="ajax"

I recreated the issue in Codepen: http://codepen.io/TheHanna/pen/XJyxXJ

Pop open the console and click submit on the form--you'll see the number of events logged increase by one each time you click.

[diegoviola1]

@TheHanna this is because you are binding the "fndt" event each time that you press the submit button (doubling it, trebling it...). You don't need the onclick event, this work is already done by abide.

[TheHanna]

Thanks @diegoviola1, that was it.

[batfan]

@patrickgalbraith Thanks for that fix. Thought I was going nuts.

[redmoik]

I found a simpler solution that works even if you have a dynamic form. This is a combination of Foundation's JavaScript utilities.

This will work as follows:

1. Validate the fields (assuming your fields has "required" tags and "error" classes)
2. If valid, prevent from submitting same content for 1000 milliseconds
3. (Optional) Clear the fields (add your function to clear all fields)
4. Re-validate

$(document).on('valid.fndtn.abide','#myForm', Foundation.utils.debounce(function(e) {// Handles the Submission
    //ajax function here
      console.log('I am not fired twice');
    //clear all fields for re-validation after successful submission  
}, 1000, true));