CODEWITHSUNDEEP
jqueryzurb-foundationabide
WebDevB
WebDevB

Reputation: 492

Abide Foundation on Valid Form

I have a really strange issue in that I'm using the abide foundation validation plugin and all seems to be ok, I can get a pop a message to appear but the form doesn't actually submit... it just seems to refresh the page.

Can anyone see what I'm doing wrong:

$(document)
// to prevent form from submitting upon successful validation
.on("submit", function(ev,frm) {
    ev.preventDefault();
    $.blockUI({ 
        message: $('#message'), 
        css: { top: '20%', width: '80%', height: '50%', left: '10%', border: 'none', background: 'none' } 
    }); 
    setTimeout(function () {
        $.unblockUI();
        return true;
    }, 17000); // in milliseconds
});

Any help would be great on this, it's stressing me out.

UPDATE

I've got a little further

$(".form")
  .on('invalid', function () {
    var invalid_fields = $(this).find('[data-invalid]');
    console.log(invalid_fields);
  })
  .on('valid', function () {
      $.blockUI({ 
          message: $('#message'), 
          css: { top: '20%', width: '80%', height: '50%', left: '10%', border: 'none', background: 'none' } 
      }); 
      setTimeout(function () {
          $.unblockUI();
      }, 17000); // in milliseconds
    return false;
    $(".form").submit();
  })
  .on('submit', function(){
    return true;
  });

For some reason, though the pop shows for a second and then the form submits... it doesn't seem to wait for my timeout.

ANOTHER UPDATE

I've now managed to get this working, anyone else who's having the same issue you need to submit the raw dom form using the options within BlockUi.

$(".form")
      .on('invalid', function () {
        var invalid_fields = $(this).find('[data-invalid]');
        console.log(invalid_fields);
      })
      .on('valid', function () {
          var theForm = this;
          $.blockUI({ 
              message: $('#message'), 
              css: { top: '20%', width: '80%', height: '50%', left: '10%', border: 'none', background: 'none' },
              timeout: 17000,
              onUnblock: function() { theForm.submit(); } 
          });
        return false;        
      })
      .on('submit', function(){
        return false;
      });

Upvotes: 1

Views: 758

Answers (1)

WebDevB
WebDevB

Reputation: 492

$(".form")
      .on('invalid', function () {
        var invalid_fields = $(this).find('[data-invalid]');
        console.log(invalid_fields);
      })
      .on('valid', function () {
          var theForm = this;
          $.blockUI({ 
              message: $('#message'), 
              css: { top: '20%', width: '80%', height: '50%', left: '10%', border: 'none', background: 'none' },
              timeout: 17000,
              onUnblock: function() { theForm.submit(); } 
          });
        return false;        
      })
      .on('submit', function(){
        return false;
      });

Upvotes: 0

Related Questions