是否有一种方法来防止提交与此javascript/jquery表单

Is there a way to prevent submitting a form with this javascript/jquery?

本文关键字：提交 javascript 表单 jquery 方法 一种 是否      更新时间：2023-09-26

我已经搜索了网络，我已经尝试实现"preventdefaults"answers"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;
        });
});

将输入元素引用为对象和从AJAX调用返回的数据有点混乱。

还包含了绑定到表单提交事件的建议。

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

我建议使用

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

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

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

相关文章：