JQuery формы отправки предотвратить по умолчанию

Question

Я пытаюсь сделать простую форму электронной почты на целевой странице. В целях тестирования я не хочу отправлять форму. Но каждый раз, когда я нажимаю на него, это предотвращает мои попытки предотвратить дефолт. Независимо от того, как я выхожу из функции submit (), она настаивает на отправке этой формы!

$(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;   
}

);

});

Почему запрос все еще отправляется?

Действительно, самое странное для меня то, что, если форма недействительна, она НЕ подает. Но если форма действительно действительна, она отправляет !!

Answer 1

Единственный возможный вариант (если это действительно имя формы ...) - это то, что ваш код выполняется до того, как DOM будет готов.

поместите его в обратный вызов DOM ready:

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

Было бы разумно проверить, запущен ли ваш обработчик!

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

Answer 2

Я ПРОСТО РЕАЛИЗОВАЛ: вы используете, нажмите не отправлять:

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

функция должна быть объявлена ​​вне dom ready! Кроме того, если вы в качестве первого шага поставите «Предотвратить дефолт», оно не будет отправлено даже с ошибкой!

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;   
    });

});

Должна быть ошибка javascript, или она вообще не связывает событие, убедитесь, что у вас есть html:

<form id='email_form' ></form>

1. Убедитесь, что у вас есть форма с id = "email_form", иногда вы можете ошибиться и поместить атрибут класса или имени, так как форма с идентификаторами полезна только в javascript, у нас нет привычки идентифицировать их,
2. Попробуйте вернуть false; вместо e.preventDefault (); Я не уверен, что это работает для форм
3. Использовать событие готовности DOM: $(function(){/*code*/});
4. Убедитесь, что в jQuery нет ошибок, например, в старых версиях jQuery есть ошибки в IE. убедитесь, что браузер не закрывает ваш код из-за ошибки!
5. если вы используете другие библиотеки или спинеты, которые влияют на $ var, используйте jQuery("#email_form").submit(); вместо $

Answer 3

Попробуйте вместо этого связать событие click и запретить использование по умолчанию.

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

Answer 4

Вы сказали, что внутри $("#email_form") это идентификатор формы, тогда вы должны использовать

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

вместо

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

, а форма должна иметь идентификатор "email_form", такой как

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

Очень простая скрипка здесь .

Вы изменили свой вопрос и теперь хотите отправить его, если проверка вернет true, поэтому

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

Answer 5

Попробуйте новый синтаксис "on".

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