JavaScript驗證-document.getElementById在Bootstrap模式下不起作用

Question

我正在使用onSubmit()函數來驗證表單條目。

如果表單位於獨立的php文件或html文件中，則表單和驗證功能可以正常工作。

但是，當表單嵌入到Bootstrap模態中時，JS驗證功能將引發錯誤消息。 [object HTMLInputElement]

我嘗試按照另一個答案中的建議將document.getElementById('uemail')更改為document.getElementById('uemail').value ，但顯然沒有值傳遞給該函數。

如果我刪除onSubmit()屬性，那么值將正確傳遞到服務器上的操作腳本。

這必須是常見用法。 我究竟做錯了什么？

這是我的代碼的縮寫部分：

<script>
function formCheck() {
    var valid = true;
    //alert('in function');
    var email = document.getElementById('uemail');
    alert('email:' + email);
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (!filter.test(email)) {
        alert('Please provide a valid email address');
        email.focus;
        valid = false;
    }
    return valid;
}
</script>


<form id="regform" action="action.php" method="post" onSubmit="return formCheck()">
    Email: <input type="text" name="uemail" id="uemail" size="50" value="" required><span id ="ast">*</span><br>
    <input type="submit" name="Submit" value="Register" />
</form>

Answer 1

編輯：看起來您無法執行document.getElementById ，您可以改為執行以下操作：

function formCheck(formEl) {
    //...
    var email = formEl.getElementsByTagName("input")[0].value;
    // this will get the first input-element in your form

和

onsubmit="return formCheck(this)"

---

錯誤：您要測試的可變email是HTMLElement，而不是字符串：

解決方案：將email設置為HTMLInputElement的值：

var email = document.getElementById('uemail').value;

也email.focus; 什么也沒做，請使用email.focus();

演示：

 function formCheck() { var valid = true; //alert('in function'); var email = document.getElementById('uemail').value; alert('email:' + email); var filter = /^([a-zA-Z0-9_\\.\\-])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]{2,4})+$/; if (!filter.test(email)) { alert('Please provide a valid email address'); email.focus; valid = false; } return valid; } 

 <form id="regform" action="action.php" method="post" onsubmit="alert(formCheck())"> Email: <input type="text" name="uemail" id="uemail" size="50" value="" required><span id="ast">*</span> <br> <input type="submit" name="Submit" value="Register" /> </form>