CODEWITHSUNDEEP
jqueryforms
Bill
Bill

Reputation: 2349

jquery form submission prevent default

I'm trying to make a simple email form on a landing page. For testing purposes, I don't want to actually submit the form. But every time I click it, it prevents my attempts to prevent the default. No matter how I exit the submit() function, it insists on submitting this form!

$(document).ready( function () {
function validateEmail($email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if( !emailReg.test( $email ) ) {
        return false;
    } else {
        return true;
    }
}

$("#email_box").click( function () { $(this).val(''); } );

$("#email_form").click(

function(e) {
    var valid = validateEmail($("#email_box").val());


    if (!valid)
    {
        $("#error_msg").fadeIn("slow");
    } else {
        $("#error_msg").style("display", "none");
        $("#email_box").val("Thanks, you'll hear from us soon!").fadeIn("slow");
        //$("#thank_you_msg").fadeIn("slow");
    }

    e.preventDefault();
    return false;   
}

);

});

Why is a request still being sent?

Truely the most bizarre thing for me is that if the form is not valid, it DOES NOT submit. But if the form is in fact valid, it submits!!

Upvotes: 2

Views: 17911

Answers (5)

The Alpha
The Alpha

Reputation: 146201

You said inside $("#email_form") it's the form id then you should use

$("#email_form").submit(function(e){
    e.preventDefault();
    // other code 
});

instead of

$("#email_form").click(function(e){...});

and form should have the id "email_form" like

<form id="email_form" method="post" action="something">
 <!-- Inputs Here -->
</form>

A very simple fiddle here.

You've changed your question and now you want to submit it if validation returns true, so

var valid = validateEmail($("#email_box").val());
if (!valid)
{
    $("#error_msg").fadeIn("slow");
} 
else
{
    $(this).submit(); // This line will submit the form.
}

Upvotes: 1

scarver2
scarver2

Reputation: 7995

Try the new "on" event syntax.

$(document).ready(function() {
  $('form').on('submit', function(e){
    e.preventDefault();
    // your validation code here
  });
});

Upvotes: 0

gdoron
gdoron

Reputation: 150273

The only possible option (if that is really the form name...) is that your code executed before the DOM is ready.

put it inside the a DOM ready callback:

$(function(){
    $("#email_form").submit(function(e) {       
      e.preventDefault();
    });
});

It would be a smart thing to check if your handler even fired!

$(function(){
    $("#email_form").submit(function(e) {       
      alert('Fired!'); // <<<<<=====
      e.preventDefault();
    });
});

Upvotes: 7

Neo
Neo

Reputation: 11567

I JUST REALIZED: you are using click not submit: 

it should be : $("#email_form").submit(function(e){});
not: $("#email_form").click(function(e){});

function should be declared outside of dom ready! also if you put prevent default as first thing it wouldn't submit even with error!

function validateEmail($email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if( !emailReg.test( $email ) ) {
        return false;
    } else {
        return true;
    }
}

$(document).ready( function () {

    $("#email_box").click( function () { $(this).val(''); } );

    $("#email_form").submit(function(e){
            e.preventDefault();
        var valid = validateEmail($("#email_box").val());   
        if (!valid)
        {
            $("#error_msg").fadeIn("slow");
        } else {
            $("#error_msg").style("display", "none");
            $("#email_box").val("Thanks, you'll hear from us soon!").fadeIn("slow");
            //$("#thank_you_msg").fadeIn("slow");
        }   

        return false;   
    });

});

There has to be an javascript error or it is not binding the event in the first place, make sure you have the html:

<form id='email_form' ></form>
  1. Make sure you have the form with the id="email_form" sometimes you might make a mistake and put class or name attribute as form with id's are only usefull in javascript we donn't have a habit of to id them,
  2. Try return false; instead of e.preventDefault(); I'm not sure if that works for forms
  3. Use DOM ready event: $(function(){/*code*/});
  4. Make sure there are no errors with jQuery, older jQuery versions have errors in IE for example. make sure the browser doesn't exit your code, because of an error!
  5. if you are using other libraries or spinets that effect the $ var use jQuery("#email_form").submit(); instead of $

Upvotes: 4

Sasha Ko
Sasha Ko

Reputation: 112

Try binding the click event instead and preventing the default there.

$("#your-submit-button").bind('click', function(e){e.preventDefault()});

Upvotes: 2

Related Questions