Re-enabling Submit after prevent default

Question

I am trying to unbind or reenable the prevent default so my form will submit on good data.

I have tried multiple examples. Here is my code and some of the examples i tried.

This code works great for what i want to. Just the last thing and resetting the div which i can implement after i get this.

function lengthRestriction(elem, min, max) {
    var uInput = elem.value;
    if (uInput.length >= min && uInput.length <= max) {
        return true;
    } else {
        var cnt = document.getElementById('field');
        cnt.innerHTML = "Please enter between " + min + " and " + max + " characters";
        elem.focus();
        $('#ShoutTweet').submit(function(e) {
            e.preventDefault();

            //bind('#ShoutTweet').submit();
            //$('#ShoutTweet').trigger('submit'); 
        });
    }
}

i have a jsbin set up too http://jsbin.com/ebedab/93

You could try e.preventDefault() in the submit event of the form and self.submit() for the opposite effect — dimirc, Mar 25 '12 at 00:40

score 8 · Answer 1 · answered Mar 25 '12 at 00:42

8

Don't try to set up and cancel a submit handler from within your validation function, do it the other way around: call the validation from within a single submit handler, and only call .preventDefault() if the validation fails:

$(document).ready(function() {

    $('#ShoutTweet').submit(function(e) {
       if (/* do validations here, and if any of them fail... */) {
          e.preventDefault();
       }
    });

});

If all of your validations pass just don't call e.preventDefault() and the submit event will then happen by default.

Alternatively you can return false from your submit handler to prevent the default:

    $('#ShoutTweet').submit(function(e) {
       if (!someValidation())
          return false;

       if (!secondValidation())
          return false;

       if (someTestVariable != "somevalue")
          return false;

       // etc.
    });

answered Mar 25 '12 at 00:42

nnnnnn

147,572
30
200
241

You might want to review this before switching to using the return statement: [http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/](http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/) In addition using preventDefault() would allow you to show all validation errors at once providing a cleaner user experience. – lhoess Aug 09 '12 at 15:15
@lhoess - I agree that showing all validation errors at once is nicer (and that's what I do in my own projects), but I disagree that using return is a "mis-use" - if the effect you want is to exit from the handler immediately and you know bubbling doesn't matter (and for a submit from a form I usually don't care about bubbling) then it is fine. Of course you could compromise and go with `event.preventDefault(); return;` (without the `false`). – nnnnnn Aug 09 '12 at 21:34
Just trying your first answer helped me, because the second with the return didn't, still thx – DarkteK Feb 18 '16 at 01:55

score 5 · Accepted Answer · answered Mar 25 '12 at 00:40

5

I'm not completely sure what you are asking, but if your goal is to destroy your custom submit handler, then use this:

$("#ShoutTweet").unbind("submit");

This assumes that you have a normal (not Ajax) form.

answered Mar 25 '12 at 00:40

Chris Laplante

29,338
17
103
134

wow it worked, i was putting the code in the wrong spot. Thank you ill accept it when the timer is off. – Michael Hahn Mar 25 '12 at 00:42
You are welcome. Did I guess correctly what you are trying to do? You wanted to disable your custom validation? – Chris Laplante Mar 25 '12 at 00:43
yes you did guess right. I am told I am not doing it properly : / – Michael Hahn Mar 25 '12 at 01:00

score 1 · Answer 3 · answered Mar 25 '12 at 00:38

1

Just call submit on the form

$('#ShoutTweet').submit();

answered Mar 25 '12 at 00:38

max

96,212
14
104
165

That depends on what you intend to do - normally you would call it after the ajax call. – max Mar 25 '12 at 00:42

score 0 · Answer 4 · edited Apr 03 '19 at 07:48

0

This works surely and enable form submission after event.preventDefault();

$('#your-login-form-id').on('submit', onSubmitLoader);

function onSubmitLoader(e) {
    e.preventDefault();
    var self = $(this);
    setTimeout(function () {
        self.unbind('submit').submit(); // like if wants to enable form after 1s
    }, 1000)
}

edited Apr 03 '19 at 07:48

Thomas De Marez

668
8
24

answered Apr 03 '19 at 06:45

Ankit Bansal

1

Re-enabling Submit after prevent default

4 Answers4

Linked