东西将表格发送到服务器

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的类型为Submit，因此您必须防止else子句中的默认操作

$("#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事件绑定到表单，而不是单击按钮。

$("#forma").on("submit", function(e) {
    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) {
        e.preventDefault();
    } // else it will submit naturally
});

东西将表格发送到服务器

问题描述

2 个解决方案

解决方案1
2 2017-09-21 15:02:25

解决方案2
1 已采纳 2017-09-21 15:00:52

东西将表格发送到服务器

问题描述

2 个解决方案

解决方案1 2 2017-09-21 15:02:25

解决方案2 1 已采纳 2017-09-21 15:00:52

解决方案1
2 2017-09-21 15:02:25

解决方案2
1 已采纳 2017-09-21 15:00:52