jquery form submission предотвратить default

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:

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

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

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

Answer 2

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

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

Answer 3

Я просто понял: вы используете нажмите не представляет:

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

функция должна быть объявлена ​​вне дом готов! также, если вы помещаете предупреждение по умолчанию, поскольку первое, что оно не представило бы даже с ошибкой!

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

}); 

Там должен быть яваскриптом ошибки или не является обязательным событием в первой очереди, убедитесь, что у вас есть HTML:

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

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

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> 

Очень простой fiddle here.

Вы изменили свой вопрос, и теперь вы хотите, чтобы представить его, если проверка возвращает истину, так

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

Answer 5

Попробуйте новый «на» синтаксис события.

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