javascript - 如何阻止表单自动提交？ (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

这是我的第一个答案: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 时，不会提交。

祝你好运!