Menu icon Foundation

Designer

My Posts





My Comments

Adam Wilson commented on Adam Wilson's post over 3 years

Hi Brian,
Thanks for testing this.
I've dug into it more closely and realised there is some JS on my site that adds a scroll effect to any #anchors and this was conflicting with the tabs.

My bad.

Adam Wilson commented on Amir's post over 3 years

Hi Amir,
I thinks it's due to the 'vertical' class on the top level UL.
Removing that fixes the arrow direction, but then it stops the menu being vertical on small screens.
You'd need a way to apply 'vertical' only for small screens ('small-vertical' would be good but I don't think it exists).
Perhaps javascript can help here or you can do it server-side?

Adam Wilson commented on Adam Wilson's post over 3 years

One follow-up question if i may...

How would i allow Abide to run validation but prevent it form submitting the form - instead allowing another function to submit the form.

The preventDefault on submit in the documentation stops all form submissions.

Basically I want to use Abide for validation but not submission.

I've tried destroying Abide after validation but I get the same problem as before so I think Abide is still submitting the form:

$(document)
.on("formvalid.zf.abide", function() {
$("#formTest").foundation("destroy");
var myForm = $('#formTest');
cmsValidation(myForm)
})
;

Adam Wilson commented on Adam Wilson's post over 3 years

One follow-up question if i may...

How would i allow Abide to run validation but prevent it form submitting the form - instead allowing another function to submit the form.

The preventDefault on submit in the documentation stops all form submissions.

Basically I want to use Abide for validation but not submission.

I've tried destroying Abide after validation but I get the same problem as before so I think Abide is still submitting the form:

$(document)
.on("formvalid.zf.abide", function() {
$("#formTest").foundation("destroy");
var myForm = $('#formTest');
cmsValidation(myForm)
})
;

Adam Wilson commented on Adam Wilson's post over 3 years

Ok, so I've discovered that I still need to include the javascript validation that my CMS provides along with Abide so they are both running together.
The CMS provided validation must be tied into the recaptcha implementation more then I'd realised - strange that I've been able to remove that validation in the past with Foundation 5 though???

Anyway, I have a working solution now.

Thank you @Brian Tan for all your help on this one.

Adam Wilson commented on Adam Wilson's post over 3 years

Thanks again Brian for the suggestion, unfortunately it's still not working for me.
The destroy function doesn't appear to be doing anything - should I see changes in the DOM occur when this is initiated?

I've managed to apply a 'required' attribute to the recaptcha field by using:

$(window).load(function() {
$('#recaptcha_response_field').prop('required', true);
});

but Abide needs to be reinitiated to recognise it - and even after that it still doesn't solve the problem.

As per your second suggestion, I wouldn't know were to start with wrapping recaptcha into an Abide custom validator :(

Totally stumped.

Adam Wilson commented on Adam Wilson's post over 3 years

Thanks Brian.

No, I can't seem to add the 'required' attribute to the captcha field initially.

I've added your code and on valid submit I get this in the console:

formvalid on event=formvalid, id=formTest, target=formTest
contact-abide:185 submit trigger

I tried adding the 'required' attribute (or is it a property?) to the captcha field after it's loaded via the console like so:

$('#recaptcha_response_field').attr('required', ' ');
$('#recaptcha_response_field').prop('required', true);

and then also reinitiating Abide on the form via the console like so:

var elem = new Foundation.Abide($('form'));

But still get the same results.

Adam Wilson commented on Adam Wilson's post over 3 years

Thanks Brian.

No, I can't seem to add the 'required' attribute to the captcha field initially.

I've added your code and on valid submit I get this in the console:

formvalid on event=formvalid, id=formTest, target=formTest
contact-abide:185 submit trigger

I tried adding the 'required' attribute (or is it a property?) to the captcha field after it's loaded via the console like so:

$('#recaptcha_response_field').attr('required', ' ');
$('#recaptcha_response_field').prop('required', true);

and then also reinitiating Abide on the form via the console like so:

var elem = new Foundation.Abide($('form'));

But still get the same results.

Adam Wilson commented on Adam Wilson's post over 3 years

I'm guessing this is a javascript conflict between Abide and Googles reCaptcha.

This is my test page, but I don't see any errors:
http://f6-abide-test.logopogo.com.au/contact-abide

Adam Wilson commented on Adam Wilson's post over 3 years

Thanks for your reply Rafi.
Unfortunately it's not the solution I need.
I can validate the reCaptcha field fine - the problem seems to be how the form data is being submitted.

Previous implementations worked fine with Foundation5.
Removing the Abide plugin the form submits to my servers fine.
But now with Foundation 6 and Abide active, my server reports that the reCaptcha code is incorrect when it isn't.

I'm not sure how this could be caused by a front-end validation but obviously it's effecting something.
I don't know enough about how the reCaptcha works and how the data is processed so not sure where to look.

Does Abide somehow change how the form data is sent to the server???

Posts Followed

  • 6
    Replies
  • Responsive Menu

    By Amir

    Responsivemenudropdowndrilldown

    I want to create a menu that behaves as a horizontal drop-down menu in medium/large screens and as vertical drildown in small screens. The problem is that in 6.1.2 the sub menus appears to the right of the menu items and the arrow is directed to right:... (continued)

    Last Reply by bill over 3 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Adam Wilson's post over 3 years

Hi Brian,
Thanks for testing this.
I've dug into it more closely and realised there is some JS on my site that adds a scroll effect to any #anchors and this was conflicting with the tabs.

My bad.

You commented on Amir's post over 3 years

Hi Amir,
I thinks it's due to the 'vertical' class on the top level UL.
Removing that fixes the arrow direction, but then it stops the menu being vertical on small screens.
You'd need a way to apply 'vertical' only for small screens ('small-vertical' would be good but I don't think it exists).
Perhaps javascript can help here or you can do it server-side?

You commented on Adam Wilson's post over 3 years

One follow-up question if i may...

How would i allow Abide to run validation but prevent it form submitting the form - instead allowing another function to submit the form.

The preventDefault on submit in the documentation stops all form submissions.

Basically I want to use Abide for validation but not submission.

I've tried destroying Abide after validation but I get the same problem as before so I think Abide is still submitting the form:

$(document)
.on("formvalid.zf.abide", function() {
$("#formTest").foundation("destroy");
var myForm = $('#formTest');
cmsValidation(myForm)
})
;

You commented on Adam Wilson's post over 3 years

One follow-up question if i may...

How would i allow Abide to run validation but prevent it form submitting the form - instead allowing another function to submit the form.

The preventDefault on submit in the documentation stops all form submissions.

Basically I want to use Abide for validation but not submission.

I've tried destroying Abide after validation but I get the same problem as before so I think Abide is still submitting the form:

$(document)
.on("formvalid.zf.abide", function() {
$("#formTest").foundation("destroy");
var myForm = $('#formTest');
cmsValidation(myForm)
})
;

You commented on Adam Wilson's post over 3 years

Ok, so I've discovered that I still need to include the javascript validation that my CMS provides along with Abide so they are both running together.
The CMS provided validation must be tied into the recaptcha implementation more then I'd realised - strange that I've been able to remove that validation in the past with Foundation 5 though???

Anyway, I have a working solution now.

Thank you @Brian Tan for all your help on this one.

You commented on Adam Wilson's post over 3 years

Thanks again Brian for the suggestion, unfortunately it's still not working for me.
The destroy function doesn't appear to be doing anything - should I see changes in the DOM occur when this is initiated?

I've managed to apply a 'required' attribute to the recaptcha field by using:

$(window).load(function() {
$('#recaptcha_response_field').prop('required', true);
});

but Abide needs to be reinitiated to recognise it - and even after that it still doesn't solve the problem.

As per your second suggestion, I wouldn't know were to start with wrapping recaptcha into an Abide custom validator :(

Totally stumped.

You commented on Adam Wilson's post over 3 years

Thanks Brian.

No, I can't seem to add the 'required' attribute to the captcha field initially.

I've added your code and on valid submit I get this in the console:

formvalid on event=formvalid, id=formTest, target=formTest
contact-abide:185 submit trigger

I tried adding the 'required' attribute (or is it a property?) to the captcha field after it's loaded via the console like so:

$('#recaptcha_response_field').attr('required', ' ');
$('#recaptcha_response_field').prop('required', true);

and then also reinitiating Abide on the form via the console like so:

var elem = new Foundation.Abide($('form'));

But still get the same results.

You commented on Adam Wilson's post over 3 years

Thanks Brian.

No, I can't seem to add the 'required' attribute to the captcha field initially.

I've added your code and on valid submit I get this in the console:

formvalid on event=formvalid, id=formTest, target=formTest
contact-abide:185 submit trigger

I tried adding the 'required' attribute (or is it a property?) to the captcha field after it's loaded via the console like so:

$('#recaptcha_response_field').attr('required', ' ');
$('#recaptcha_response_field').prop('required', true);

and then also reinitiating Abide on the form via the console like so:

var elem = new Foundation.Abide($('form'));

But still get the same results.

You commented on Adam Wilson's post over 3 years

I'm guessing this is a javascript conflict between Abide and Googles reCaptcha.

This is my test page, but I don't see any errors:
http://f6-abide-test.logopogo.com.au/contact-abide

You commented on Adam Wilson's post over 3 years

Thanks for your reply Rafi.
Unfortunately it's not the solution I need.
I can validate the reCaptcha field fine - the problem seems to be how the form data is being submitted.

Previous implementations worked fine with Foundation5.
Removing the Abide plugin the form submits to my servers fine.
But now with Foundation 6 and Abide active, my server reports that the reCaptcha code is incorrect when it isn't.

I'm not sure how this could be caused by a front-end validation but obviously it's effecting something.
I don't know enough about how the reCaptcha works and how the data is processed so not sure where to look.

Does Abide somehow change how the form data is sent to the server???

Posts Followed


Following

  • No Content

Followers

  • No Content