有没有办法防止使用这个 javascript/jquery 提交表单？

Question

我已经在网上搜索过，我尝试过到处执行“preventdefaults”和“return false”语句，但我似乎无法找到阻止此表单提交和重新加载页面的方法。它仅在表单经过验证后才会重新加载。我是一个初学者，但我真的很努力地实现了验证表单的脚本（它具有“post”方法和“#”作为操作），并进行 ajax 调用。这是一项学校作业，对于你们可以给出的任何指示都会很优雅。

$(document).ready(function()
{
    $("#submit").click(function()
        {
            var gbname = $("#gbname")[0];
            var gbmessage = $("#gbmessage")[0];

            formFields = [gbname, gbmessage]
            var warning = false;

            for (i=0; i<formFields.length; i++)
            {
                formFields[i].style.backgroundColor = "white";
                if (formFields[i].value == "")
                {
                    formFields[i].style.backgroundColor = "red"
                    $(formFields[i]).bind("keyup", resetBgColor);
                    $(formFields[i]).bind("change", resetBgColor);
                    warning = true;
                }       
            }

            if (warning == true)
            {
                alert("Vänligen fyll i fälten korrekt!");
                return false;
            }

            else
            {
                $.post('ajax.php', {gbname: gbname, gbmessage: gbmessage},

                function(data)
                {
                    $("#successmessage").html(data);
                    $("#successmessage").hide();
                    $("#successmessage").fadeIn(1500); //Fade in error/success-meddelande

                    var comment = $("<div class='film2'><p class='names'><b>Namn:</b>" +gbname+ "</p> <p class='messages'><b>Meddelande:</b>" +gbmessage+ "</p></div>");

                    $("#kommentarer").prepend(comment);
                    clearForm();


                });

                return false;
            }

            return false;

        });

});

Answer 1

您对作为对象的输入元素的引用以及从 AJAX 调用返回的数据有点混乱。

还加入了绑定到表单提交事件的建议。 DEMO

$(document).ready(function () {

   function clearForm(){
        $('input.reset').each(function(){
            $(this).val('');
        });
    }

    $("form").on('submit', function () {
        alert('submitted!');
        var gbname = $("#gbname");
        var gbmessage = $("#gbmessage");

        formFields = [gbname[0], gbmessage[0]]
        var warning = false;

        for (i = 0; i < formFields.length; i++) {
            formFields[i].style.backgroundColor = "white";
            if (formFields[i].value == "") {
                formFields[i].style.backgroundColor = "red"
                $(formFields[i]).bind("keyup", resetBgColor);
                $(formFields[i]).bind("change", resetBgColor);
                warning = true;
            }
        }

        if (warning == true) {
            alert("Vänligen fyll i fälten korrekt!");
            return false;
        } else {
            var J = JSON.stringify({
                        "gbname": gbname.val(),
                        "gbmessage": gbmessage.val()
                    });
            console.log(J);
            $.ajax({
                type: "POST",
                url: '/echo/json/',
                datatype: 'json',
                data: {
                    json: J,
                    delay: 3
                },
                success: function (data) {
                    $("#successmessage").html(data);
                    $("#successmessage").hide();
                    $("#successmessage").fadeIn(1500); //Fade in error/success-meddelande

                    var comment = $("<div class='film2'><p class='names'><b>Namn:</b>" + data.gbname + "</p> <p class='messages'><b>Meddelande:</b>" + data.gbmessage + "</p></div>");

                    $("#kommentarer").prepend(comment);
                    clearForm();


                }  // end success
            }); // end ajax

            return false;
        }  // end else

        return false;

    });

});

Answer 2

我建议使用

$("form").on('submit', function (e) {
[...]
if(validationErrors) {
    alert(Errormessage);
    e.preventDefault();
}
[...]

而不是返回 false。 https://developer.mozilla.org/en-US/docs/DOM/event.preventDefault

为了让它工作，你必须使用事件作为你的回调函数的参数。