简体   繁体   English

JavaScript验证-document.getElementById在Bootstrap模式下不起作用

[英]JavaScript validation - document.getElementById not working in Bootstrap modal

I am using an onSubmit() function to validate form entries. 我正在使用onSubmit()函数来验证表单条目。

The form and validation function work OK,if the form is in a standalone php file or an html file. 如果表单位于独立的php文件或html文件中,则表单和验证功能可以正常工作。

But when the form is embedded in a Bootstrap modal the JS validation function throws an error message. 但是,当表单嵌入到Bootstrap模态中时,JS验证功能将引发错误消息。 [object HTMLInputElement]

I have tried changing document.getElementById('uemail') to document.getElementById('uemail').value as recommended in another answer, but no value has apparently been passed to the function. 我尝试按照另一个答案中的建议将document.getElementById('uemail')更改为document.getElementById('uemail').value ,但显然没有值传递给该函数。

If I remove the onSubmit() attribute then the values are passed correctly to the action script on the server. 如果我删除onSubmit()属性,那么值将正确传递到服务器上的操作脚本。

This must be common usage. 这必须是常见用法。 What am I doing wrong? 我究竟做错了什么?

This is an abbreviated section of my code: 这是我的代码的缩写部分:

<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>

EDIT: looks like you can't do document.getElementById , you can do this instead: 编辑:看起来您无法执行document.getElementById ,您可以改为执行以下操作:

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

and

onsubmit="return formCheck(this)"

Mistake: The variable email you are testing is a HTMLElement, not a string: 错误:您要测试的可变email是HTMLElement,而不是字符串:

在此处输入图片说明

Solution: set email to the value of the HTMLInputElement: 解决方案:email设置为HTMLInputElement的值:

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

also email.focus; email.focus; is not doing anything, use email.focus(); 什么也没做,请使用email.focus();

Demo: 演示:

 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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM