使用 Javascript 验证 HTML 表单不起作用
[英]Validating HTML form using Javascript not working
问题描述
在继续提交表单之前，我正在尝试使用 Javascript 来验证三个字段中是否都有内容。
HTML代码：
<form name="form">
<input id="OldPassword" type="password">
<input id="NewPassword" type="password">
<input id="ConfirmNewPassword" type="password">
<div id="okButtonContainer">
<span>Submit</span>
<a href="#" onclick="validateForm()" id="submitButton">
</a>
</div>
</form>
Javascript代码：
<script>
function submitJSForm()
{
document.getElementById('form').submit();
}
function validateForm()
{
var a = document.getElementById("OldPassword").value;
var b = document.getElementById("NewPassword").value;
var c = document.getElementById("ConfirmNewPassword").value;
alert("Got to here");
if (a == null || a == "" || b == null || b == "" || c == null || c == "")
{
alert("Please Fill All Required Field");
// do nothing
}
else
{
alert("Submitting...")
submitJSForm();
}
alert("Got to end function");
}
</script>
所有 ID 都匹配并且没有任何拼写错误。
每当我在所有三个字段中输入内容时，if 语句都会运行警报“请填写所有必填字段”，这是它不应该的。 我究竟做错了什么？
3 个解决方案
解决方案1
0 2020-02-10 14:13:58
它适用于 ID，试试这个
function submitJSForm() { document.getElementById('form').submit(); } function validateForm() { var a = document.getElementById("OldPassword").value; var b = document.getElementById("NewPassword").value; var c = document.getElementById("ConfirmNewPassword").value; alert("Got to here"); if (a == null || a == "" || b == null || b == "" || c == null || c == "") { alert("Please Fill All Required Field"); // do nothing } else { alert("Submitting...") submitJSForm(); } alert("Got to end function"); }
<form name="form" id="form"> <input id="OldPassword" type="password"> <input id="NewPassword" type="password"> <input id="ConfirmNewPassword" type="password"> <div id="okButtonContainer"> <a href="#" onclick="validateForm()" id="submitButton"> <span>Submit</span> </a> </div> </form>
解决方案2
0 2020-02-10 14:14:07
您可以使用名为checkValidity()的函数
通过向每个输入添加required标签，以下内容将让您知道是否在表单中填写了所有内容
var form = document.getElementById(‘MyForm’);
var isValidForm = form.checkValidity();
解决方案3
0 2020-02-10 14:23:01
我试图重现你得到的错误，但这里正确通过的验证是我基于你的脚本的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form id="form">
<input type="password" id="OldPassword" />
<input type="password" id="NewPassword" />
<input type="password" id="ConfirmNewPassword" />
<input onclick="validateForm()" value="Submit" />
</form>
<script>
function submitJSForm() {
document.getElementById('form').submit();
alert("Submitting...");
}
function validateForm() {
var a = document.getElementById("OldPassword").value;
var b = document.getElementById("NewPassword").value;
var c = document.getElementById("ConfirmNewPassword").value;
if (a == null || a == "" || b == null || b == "" || c == null || c == "") {
alert("Please Fill All Required Field");
// do nothing
}
else {
submitJSForm();
}
}
</script>
</body>
</html>
你能把你答案的 HTML 部分贴出来吗？
使用JavaScript验证HTML表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.