如何阻止表单自动提交？ （Django的/ jQuery的）

Question

我有一个问题，我的表单提交即使我没有告诉它（在Javascript中）。我有一个表单按钮的事件处理程序，它检查输入是否是一个大于0的有效整数，并对此进行处理。问题是即使它发现这是假的，表单仍然会提交。

这是我的表单代码：

<form id="case_form" method="post" action="/dms/create/">
    {% csrf_token %}
    <h3>Case ID</h3>
    <input name="caseID" id="caseNum" type="text" class="form-control" placeholder="ID of Case to create" required
           autofocus><br/>
    <button class="btn btn-lg btn-primary btn-block" id="submitButton">Create Case</button>
</form>

我的Javascript事件处理程序。

$('#submitButton').click(function () {
    numVal = $("#caseNum").val();
    if (Math.floor(numVal) == numVal && $.isNumeric(numVal) && numVal > 0){
        $("#case_form").submit();
    }else{
        $("#errorDisplay").show();
        //Code gets here but still submits once leaving function
    }
});

Answer 1

解决了......

提交这个问题的道歉，我试图弄清楚多年，然后索德的法律 - 一旦我提出问题，我就有一个“哦，那是如此明显”的时刻。

我忘了把...

type=button

...按钮HTML。

Answer 2

这是我的第一个答案：D

试试这个。

<form onsubmit="return fnValidate()" ...> ... </form>

Javascript：

function fnValidate(){ 
    var numVal = $("#caseNum").val();
    if (Math.floor(numVal) == numVal && $.isNumeric(numVal) && numVal > 0){
        return true;
    }else{
       $("#errorDisplay").show();
       return false;
    }
}

当fnValidate返回True时，您的表单将被提交。当函数返回false时，这将不会被提交。

祝你好运！

Answer 3

这是发生在我身上，我意识到我必须将注释的代码放入这些Django注释标签中，才能停止触发：{％comment％}条评论在{％endcomment％}。