CODEWITHSUNDEEP
javascriptpreventdefault
Stéphane R.
Stéphane R.

Reputation: 1496

preventDefault on submitting form

I would like run function on my form submit (validate with Foundation framework) :

$($newsletter).on('formvalid.zf.abide', function(ev) {
    ev.preventDefault();
    alert('validate!');
    openRevealNewsletter(this.getAttribute('action'));
});

I've my alert when my form is valid, but my preventDefault() don't work. My form is submitted :(

Upvotes: 1

Views: 2081

Answers (3)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48357

Please try this:

$($newsletter).on('formvalid.zf.abide', function(ev) {
   alert('validate!');
   openRevealNewsletter(this.getAttribute('action'));
   return false;
});

This will stop the form post on a false returned value.

When you are using return false,automatically it is doing 3 separate things when you call it:

1.event.preventDefault();

2.event.stopPropagation();

3.Stops callback execution and it returns immediately when callback are called.

Upvotes: 1

Vikas Kandari
Vikas Kandari

Reputation: 1852

first of all easy way to make this work done is use 

 <button type="button">submit</button>

instead of 

    <button type="submit">submit</button>

to submit the form programmatically in java script use 

     document.getElementById("FormID").submit();

this will submit your form when you call this script also prevent default will not required once you replace submit with button in submit button

Upvotes: 2

sabithpocker
sabithpocker

Reputation: 15558

Intercept submit with submit event.

$($newsletter).on("submit",function(e) {
  e.preventDefault();
  console.log("submit intercepted");
  return false;
});
$($newsletter).on("forminvalid.zf.abide", function(e,target) {
  console.log("form is invalid");
  //show error messages
});
$($newsletter).on("formvalid.zf.abide", function(e,target) {
  console.log("form is valid");   
  //process form
  openRevealNewsletter(this.getAttribute('action'));
});

Upvotes: 1

Related Questions