2

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!!

12
  • 1
    It shouldn't be being sent; your issue must lie elsewhere. Mar 20, 2012 at 20:00
  • do you have your code in a ready block? Mar 20, 2012 at 20:01
  • Show the html. and a Fiddle would be even better.
    – gdoron
    Mar 20, 2012 at 20:02
  • 1
    sometimes I out of habit confuse the name attribute with the id on form elements. It's common if you used to develop sites before the ajax ages. Make sure the form has the ID attribute. not name='email_form'
    – Neo
    Mar 20, 2012 at 20:19
  • 1
    You just updated your question with totally other code. WHAT?!
    – gdoron
    Mar 20, 2012 at 20:19

5 Answers 5

7

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();
    });
});
0
4

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 $
2

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

$("#your-submit-button").bind('click', function(e){e.preventDefault()});
1
  • it will not make any difference. by the way. you can use .click instead of .bind('click'. "jQuery write less, do more" ...
    – gdoron
    Mar 20, 2012 at 20:21
1

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.
}
0
0

Try the new "on" event syntax.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.