garygreen / dominar

Lightweight bootstrap validator inspired by Laravel
http://garygreen.github.io/dominar/
22 stars 4 forks source link

submit woes #13

Closed stocksp closed 9 years ago

stocksp commented 9 years ago

I replaced brand x validator with dominar. the validations works great. Unfortunately, my submit event is always called with the event object returning true for isDefaultPrevented();

Here is what I see in dominar when I click my form Submit button; fireSubmit is called and we get to line 688 callback at line 647 fires which calls line 681 preventDefault() is called and then validateAll next 683 ('submit-passed') is called at this point isDefaultPrevented() still returns true. continuing in the debugger your line 647 is called (again).

the function submitPassed is called() we get a couple more trigger events at 650 and now my submit handler is called. and isDefaultPrevented() returns true. Which is not good.

What is strange is that the default event handle is still called. despite anything I do to stop it.

for 'fun' I put

if (!event.isDefaultPrevented()) {
      event.preventDefault();
 } else {
      event.preventDefault();
}

at that top of my submit. and the default submit handler is still called.

My stuff is pretty basic and don't have anything strange going on ... I hope. Changing back to brand x branch and submit behaves normally ...

P:)

update:

add this to your dominar demo and you will see the same problem.

$(document).ready(function(){
   $('#basic-demo-form').on('submit', function(e){
    e.preventDefault();
    console.log('submit handling here!');
   });
});
garygreen commented 9 years ago

Did you check the docs example for preventing default submit? You have to use dominar.submit

The submit event allows you to prevent the validation from occuring by preventing the default action:

$('#my-form').bind('dominar.submit', function(event) {
   event.preventDefault(); // Prevent form from being validated
});
garygreen commented 9 years ago

Also if you don't want it to validate on submit at all, it might be better just to pass a config option (as third parameter) to not submit, then attach the submit handler manually like in your example.

var dominar = new Dominar($('#form'), ...,  { validateOnSubmit: false });
stocksp commented 9 years ago

sorry, I must be not explaining the problem clearly. I'm not trying to prevent validation ... validation is good. I'm just trying to stop default form submission. what must happen in most application that handle this themselves. Very basic stuff. No matter what I do in MY submit handler.... dominar is submitting my form. 'Normally' all one needs to do to stop default submission is put a simple .preventDefault() in your own submit handler. THIS DOESN'T work. Dominar is calling the default submit on it own. and its very easy to repro. In your demo app. Add the code I put in update above:

$(document).ready(function(){
   $('#basic-demo-form').on('submit', function(e){
    e.preventDefault();
    console.log('submit handling here!');
   });
});

add the stuff you just posted if you like .... it doesn't make any difference. You will still end up with a full page refresh and your url will be

file:///Users/paul/projects/donimarDemo/index.html?username=asfsf&notes=l%3Bkj%3Blkj&group=admin

I'm trying to prevent the above from happening. What I expect to happen with e.preventDefault() in my handler is _the form to remain filled with data_ and nothing else happen except a log to console saying 'submit handling here'.

If you add the code above and put a break point in the console.log you will see it called many many many times before eventually a full page reload is done through a submit.

All I"m trying to do is stop default form submission and _I can't get Dominar from doing a default form submission_ 'underneath me'.

garygreen commented 9 years ago

Right. Well to prevent form submission use the dominar.submit-passed event and do a prevent default on that. That's when dominar is about to submit the form and that way you can prevent it.

stocksp commented 9 years ago

that works! thank you so much for your patience!

I would suggest you place in your docs right below the 'dominar.submit' a 'dominar.submit-passas'. explaining this will prevent Dominar from doing a submit ... which I believe the vast majority of your users will want.

FYI, when I put this event in your demo code it works, BUT, I got about 2 dozen calls on the event. I do not see this in my own code (called only once) and maybe it has something to do with the demo templates ... The demo code was an exceptionally good way to experiment for me ... maybe you should include it in the repo

thanks again.