Question

我已经在我的一个表单中实现了表单检查，但在检查错误并检测到该表单无效后，会显示警报并将表单发送到服务器（虽然它不应该是）。用于提交的按钮没有明确的type属性，并且所有内容都只由一个文件中的一个事件处理程序控制（没有其他JS文件）。

这是表格：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Forma</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>

        <form id='forma' method='post' action='process.php'>
            <div class='form-field'>
                <label class='field-name'>Ime i prezime</label>
                <input class='form-control' type='text' name='ime_prezime' id='ime_prezime'/>
            </div>

            <!-- other fields -->

            <div id='send-field'>
                <button id='submit' class='btn btn-default form-control'>
                    Pošaljite zahtev
                </button>
            </div>
        </form>

        <script src='node_modules/jquery/dist/jquery.min.js'></script>
        <script src='js/main.js'></script>
    </body>
</html>

这是事件处理程序代码：

$("#submit").on("click", function() {
    var invalidForm = false;

    if ($("#ime_prezime").length) {
        if ($("#ime_prezime").val() === "") {
            invalidForm = true;
            $("#ime_prezime").attr("placeholder", "Morate uneti ime i prezime!");
            $("#ime_prezime").css("border", "1px solid red");
        }
    }

    // similar checking for other fields

    if (!invalidForm) {
        $("#forma").submit();
    } else {
        alert("Please fill all the fields!");
        throw new Error("test");
    }
});

我认为事件处理程序执行了两次所以我在代码中抛出错误来停止执行JS，但看起来这不是问题。有没有办法检测将表单发送到服务器的内容？

Answer 1

那是因为你没有阻止默认行为

在您的代码中包含此内容：

e.preventDefault();

最终代码应如下所示：

$("#submit").on("click", function(e) { //please note the argument e, it is the event
    e.preventDefault(); //Here we prevent the default action of the form
    var invalidForm = false;

    if ($("#ime_prezime").length) {
        if ($("#ime_prezime").val() === "") {
            invalidForm = true;
            $("#ime_prezime").attr("placeholder", "Morate uneti ime i prezime!");
            $("#ime_prezime").css("border", "1px solid red");
        }
    }

    // similar checking for other fields

    if (!invalidForm) {
        $("#forma").submit();
    } else {
        alert("Please fill all the fields!");
        throw new Error("test");
    }
});

Answer 2

#button是类型提交，因此您必须阻止else子句中的默认操作

protected override void OnException(ExceptionContext filterContext)
{
    if (filterContext.HttpContext.IsCustomErrorEnabled)
    {
        //trigger elmah
        Elmah.ErrorSignal.FromCurrentContext().Raise(filterContext.Exception);

        //get the last elmah error
        var errorList = new List<ErrorLogEntry>();
        Elmah.ErrorLog.GetDefault(filterContext.HttpContext.ApplicationInstance.Context).GetErrors(0, 1, errorList);
        var error = errorList.LastOrDefault();

        //return the custom error page
        filterContext.Result = new ViewResult
        {
            ViewName = "~/Views/Shared/Error.cshtml",
            ViewData = new ViewDataDictionary() {
                { "ErrorDetails", showVerboseErrors && error != null ? filterContext.Exception.Message : null },
                { "ErrorId", error != null ? error.Id : null }
            }
        };

        //stop further error processing
        filterContext.ExceptionHandled = true;
    }
    else
    {
        base.OnException(filterContext);
    }
}

但我建议进行以下更改：将$("#submit").on("click", function(e) { // <- Pass the event var invalidForm = false; if ($("#ime_prezime").length) { if ($("#ime_prezime").val() === "") { invalidForm = true; $("#ime_prezime").attr("placeholder", "Morate uneti ime i prezime!"); $("#ime_prezime").css("border", "1px solid red"); } } // similar checking for other fields if (invalidForm) { $("#forma").submit(); } else { e.preventDefault(); // <- And this alert("Please fill all the fields!"); throw new Error("test"); } });事件绑定到表单而不是单击按钮。

submit

有些东西将表单发送到服务器

2 个答案: