使用 JavaScript 時停止表單提交

Question

我有一個表單，如果這個數字小於 15，用戶輸入一個 cnic 號碼，然后提醒一個 msg 並停止表單提交，但問題是當cnic號碼小於 15 時，表單提交不能停止。

<script>
    function validateform()
    {

        var cnic1 = document.getElementById("cnic1").value;
        if (cnic1.length < 15)
        {
            window.alert("Invalid CNIC");
            cnic1.focus();
            return false;
        }
    }
</script>

<form class="col s12" action="tabs.php" method="post" enctype="multipart/form-data" name="applyform">

    <div class="row">
        <div class="input-field col s1"></div>
        <div class="input-field col s4"><label>CNIC No. </label>
            <font style="color: #ff0000">*</font>
        </div>
        <div class="input-field col s6">
            <input id="cnic1" name="cnic1" type="text" value="<?php echo $RowAcc['cnic'];?>" maxlength="15" placeholder="CNIC #" required>
        </div>
    </div>
</form>

在tabs.php頁面上寫的php提交代碼是否存在問題，這就是表單仍在提交過程中的原因？

Answer 1

您不必返回false來阻止提交表單。 需要使用事件的preventDefault()方法，如果數據有效，則使用 JS 提交表單。 像這樣：

function validateform(e) { // take the event as parameter
    e.preventDefault(); // stop the submission

    var cnic1 = document.getElementById("cnic1");

    if (cnic1.value.length < 15) {
        window.alert("Invalid CNIC");
        cnic1.focus();
    } else {
        form.submit();
    }
}

var form = document.getElementsByName('applyform')[0];
form.addEventListener('submit', validateform);

我還使用 JS 添加了偵聽器，這樣您就可以確保將事件參數傳遞給您的驗證函數。 從表單中刪除onsubmit="..." 。

Answer 2

從 onchange = "" 事件調用 js 函數，或者使用任意按鈕調用 click 事件。 您的 js 函數將起作用。

Answer 3

return false; 

或者

event.preventDefault();

Answer 4

您可以使用peventDefault()方法