Menu icon Foundation
form abide reloads page with ajax

Hi!

I wanted to use the abide-validation of Foundation 5, and send the data through ajax.

Here is my mark-up for the form

<form id="my_form" method="post" action="../path.php" data-abide="ajax">    
</form>
            

         

My problem is, it always reloads the page to the url specified from the action attribute of my form.
Here is my script:

$('form').on('valid', function (ev) {
    var form = $(this);
 
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize(),
            success: function (data) {
                alert('ok');
            }
        })
	ev.preventDefault();
});
            

         

The thing is, if I take out data-abide="ajax" from my form, the page does not reload but of course all the

<small class="error"></small>
            

         

visible, and yes the abide validation won't work. Can anyone tell me what I'm supposed to be doing?

Foundation 5AJAXjqueryabide-validation

Hi!

I wanted to use the abide-validation of Foundation 5, and send the data through ajax.

Here is my mark-up for the form

<form id="my_form" method="post" action="../path.php" data-abide="ajax">    
</form>
            

         

My problem is, it always reloads the page to the url specified from the action attribute of my form.
Here is my script:

$('form').on('valid', function (ev) {
    var form = $(this);
 
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize(),
            success: function (data) {
                alert('ok');
            }
        })
	ev.preventDefault();
});
            

         

The thing is, if I take out data-abide="ajax" from my form, the page does not reload but of course all the

<small class="error"></small>
            

         

visible, and yes the abide validation won't work. Can anyone tell me what I'm supposed to be doing?

This post has been closed. No new replies can be added.

Per Nielsen over 5 years ago

Haven't tested your code at all, but I think you should move your ev.preventDefault(); to line 2 instead to stop all default actions. If you can show us some more code at jsfiddle.net I'll be happy to look at it :)

Krishia Valencia over 5 years ago

Hi!

sorry, I'm not familiar on how jsfiddle works I tried using it but got lost along the way...

anyway, I experimented on a lot of different things and found what's wrong with my code

Here is where I found the error I've been searching for:

The page reloads when I have this data-equalto, since it is comparing to a non-existent input field. I just noticed it.

My previous jquery code does not also work.
HTML
<div class="large-6 columns password-confirmation-field">
<label>Confirm Password <small>required</small>
<input class="password" type="password" required data-equalto="password">
</label>
<small class="error">The password did not match</small>
</div>

  <form id="my_form" method="post" action="../process/process_member_add.php?v=member" data-abide="ajax">  
<div class="row">
  <div class="large-6 columns password-field">
    <label>Password <small>required</small>
      <input class="password" type="password" id="txtPass" required>
    </label>
    <small class="error">Your password must match the requirements</small>
  </div>
  <div class="large-6 columns password-confirmation-field">
    <label>Confirm Password <small>required</small>
      <input class="password" type="password" required data-equalto="password">
    </label>
    <small class="error">The password did not match</small>
  </div>
</form>

I tried using the submit function from the documentation:

 $('form')
  .on('invalid', function () {
    var invalid_fields = $(this).find('[data-invalid]');
    console.log(invalid_fields);
  })
  .on('valid', function (g) {

    g.preventDefault();
    var form =$(this);
    $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
            success: function (data) {
              var result=trim(data);
                alert(result);
            }
    });  
  });

function trim(str){
  var str=str.replace(/^\s+|\s+$/,'');
  return str;
}

Anyway, it works now and it turns out I've been stressing out just because of 1 measly mistake of naming..

i did not know that the data-equalto="txtPass" refers to the id of the input field you are comparing it to.

It was a mistake on my part.