CODEWITHSUNDEEP
jqueryvalidationzurb-foundation
aBhijit
aBhijit

Reputation: 5391

preventDefault not working with Zurb validation(Abide)

I am using zurb foundation for my website. It has got it's own validation. This is a link to the documentation.

I am using the following code to validate and submit my form data.

$('#myForm').on('valid', function (g) {
g.preventDefault();

//ajax call to insert the data

});

My problem is, I can't prevent the default submit of this form using preventDefault().

Any ideas how to do it?

I tried doing this.

 $('#myForm').on('valid submit', function (g) {
    g.preventDefault();

    //ajax call to insert the data

    });

This prevents the default submit, but it inserts the data twice.

Upvotes: 7

Views: 6285

Answers (5)

user3257693
user3257693

Reputation: 486

For foundation 5 try this when using data-abide with ajax calls, don't worry about the preventDefault(); , just use the data-abide="ajax" like below

HTML

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

JAVASCRIPT

$('#myForm')
  .on('invalid.fndtn.abide', function () {
    var invalid_fields = $(this).find('[data-invalid]');
    console.log(invalid_fields);
  })
  .on('valid.fndtn.abide', function () {
    console.log('valid!');
  });

Simple and easy Reference - http://foundation.zurb.com/docs/components/abide.html

Upvotes: 1

cautionbug
cautionbug

Reputation: 475

As stated in my comment on another answer:

This doesn't stop the "invalid" event from executing the AJAX, as "valid" and "invalid" are both triggered by "submit". The result is the above function is called by "submit", and even if the form is invalid, the AJAX call is made.

With a small modification, that code can work:

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

This is a hacky way around the Abide validation events, but it'll work for me until the library provides better handling for this scenario.

--UPDATE--

The original question applied to Foundation 4. It looks like Foundation 5+ handles this scenario much better:

"To handle the submit event yourself, use data-abide="ajax" instead of data-abide inside the form tag." 

<form data-abide="ajax">
  <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>

$('input[name="users_name"]').on('valid', function() {
  // Handle the submission of the form
});

i haven't used Abide since v4, so wasn't aware of this update.

Upvotes: 12

Adrian F&#246;der
Adrian F&#246;der

Reputation: 893

I find this approach cleaner:

$('#myForm').on({
    'submit': function(){
        // will prevent browser-submitting the form in any any case:
        return false;
    },
    'valid': function(){
        // bind to abide's event and only care about submitting the stuff AJAX'ly
        $(this).ajaxSubmit({
            // ...
        });
    }
});

Upvotes: 2

Thomas Venturini
Thomas Venturini

Reputation: 3750

Open the foundation.abide.js file

go to the validate method/function

then at the last line of it, change "return true;" to "return false;"

Upvotes: 1

prava
prava

Reputation: 3986

You can use g.stopPropagation() along with g.preventDefault(). It might help you fixing you rissue.

$('#myForm').on('valid submit', function (g) {
    g.stopPropagation();
    g.preventDefault();

    //ajax call to insert the data

});

Upvotes: 3

Related Questions