Abide: Prevent refresh on submit

[boah123]

Hi,

When the form is invalid a false is returned, if valid a true. This true makes the page refresh which I don't like. Therefore I suggest this change:

File: foundation.abide.js
Line: 110
Change: return false; // this prevents the page refreshing.

Best,
Boah

[mrsweaters]

I'm not seeing this issue you are referring to. The docs page successfully captures the submit event and keeps the data from submitting if the form is invalid. Can you post your implementation so I can take a look?

Line 100 gets returned if the form is invalid, else line 110 gets returned.

[boah123]

I have my form inside a reveal modal, maybe that is part of the problem.

When I hit the submit button, leaving all input fields blank (thus an invalid form), the result is a page refresh. When I change that line 110 to false, it seems to work fine.

[damirkotoric]

I think that the problem here is that there is no way to stop the form from submitting if the form fields are all valid. For example, you may want to use AJAX to submit the form but still use Abide to validate the fields.

[damirkotoric]

I've found a solution here: http://stackoverflow.com/questions/18099407/preventdefault-not-working-with-zurb-validationabide

You can stop the form from submitting by default, then check if it is valid before adding the desired functionality like so:

$("#myForm").on("valid invalid submit", function(e){
e.stopPropagation();
e.preventDefault();
if (e.type === "valid"){
// AJAX call
}
});

[boah123]

I will give it a try.

Another question about abide: Can you tell me if the automatic matching of input types with patterns also works with browsers that don't support HTML5? In other words, in case I use type="email" then I could leave out pattern="email" in the same element (whatever the browser)?

[mrsweaters]

I have pushed that makes Ajax submission easier. Now you can just set data-abide="ajax" on your form and the form submission will be prevented on both valid and invalid forms. This way you can just do:

$('#myForm').on('valid', function () {
  // AJAX call
});

c169e13

[genuino2]

Sorry but, i've this form inside a reveal

<form data-abide id="form_anagrafica">
......
<button type="submit" class="medium button">Submit</button>
</form>

and this script code:

$('#form_anagrafica').on('valid', function () {
        console.log('valid!');
        $('#cart-button').fadeIn('slow');
    });

where cart-button is the id of a submit button of my store cart.
Well, when i click submit button the page will be refresh and submit will not stopped. Why?
i want to use abide ONLY TO VALIDATE my input but the form submission will be do by cart-button that has some attributes to use with simplecart.js

Thankyou

[mrsweaters]

<form data-abide="ajax" id="form_anagrafica">

This should do the trick.

[kjbetz]

Thank you, this works!

[23Pstars]

+1 it works :)

[georgetrad]

@mrsweaters
It worked. Thank you.

[rlynjb]

is there a fix for this on foundation 6?