有沒有辦法阻止使用此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調用返回的數據有些混亂。

還納入了綁定到表單的Submit事件的建議。 演示

$(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/zh-CN/docs/DOM/event.preventDefault

為了使其正常工作，您必須將事件用作回調函數的參數。