Ajax阻止表单提交

Question

我正在使用JavaScript / ajax脚本来阻止表单提交并发出诸如“错误！”之类的消息。 或“成功！”。 该脚本不起作用。 表单提交后，浏览器会将用户重定向到Submit.php。

这是我的Ajax / Javascript：

$(function() {

    // Kontakt-Formular in das Script laden
    var form = $('#contact-form-edc');

    $(form).submit(function(e) {
        // Den Weiterleitung stoppen
        e.preventDefault();

        // Die Kontakt-Formular Daten in das Script laden
        var formData = $(form).serialize();

        // Das Kontakt-Formular absenden
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })

        .done(function(response) {
            // Erfolgreiche Meldung
    document.getElementById('success').style.display = "";
          document.getElementById('error').style.display = "none";

            // Das Kontakt-Formular leeren
                     $('input').val('');
            $('textarea').val('');
            $('.button').val('Abschicken')
        })
        .fail(function(data) {
            // Fehler Meldung
      document.getElementById('error').style.display = "";
            document.getElementById('success').style.display ="none";
        });

    });

});

Answer 1

问题是，您将表单元素包装在另一个jquery对象中。 尝试这个：

$(function() {

    // Kontakt-Formular in das Script laden
    var form = $('#contact-form-edc');

     form.submit(function(e) {   
         // ...

Answer 2

return false; 将做您想要的，您可以像这样编写代码...

<form ... onsubmit='checkForm()'>

和js将是

    function checkForm()
    {
    //your checks
    ..
    if(error)
    {
    return false;
    }else
    {
    return true;
    }
}

如果您正在使用jQuery，请确保您返回的是false