我正在制作一个简单的表单，并为每个字段制作了一个函数来验证。但是当我通过live server测试表单时，即使字段没有验证，表单也会提交。除此之外，每个函数似乎都能按预期工作。
function validateForm () {
var firstName = document.getElementById('fname').value;
var phoneNumber = document.getElementById('phonenumber').value;
function firstNameValid () {
if (firstName == "") {
alert("First name empty")
return false;
} else {
return true;
};
};
firstNameValid();
function phoneValid () {
if (phoneNumber == null || phoneNumber == "" || phoneNumber.length < 10) {
alert("Phone number must be defined and not exceed 10 characters")
return false;
} else {
return true;
}
};
phoneValid();
result = firstNameValid() && phoneValid();
};
这是HTML
<body>
<form name="registration" action="page2.html" onsubmit="return validateForm()" method="GET">
<ul>
<li>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" onsubmit="return firstNameValid()"><br>
</li>
<li>
<label for="phonenumber">Phone Number:</label><br>
<input type="text" id="phonenumber" name="phonenumber" onsubmit="return phoneValid()">
</li>
</ul>
<button type="submit" value="Submit">Submit</button>
</form>
<script src="app.js"> </script>
</body>
您没有返回结果变量
result = firstNameValid() && phoneValid();
return result;
您应该返回结果。
null
function validateForm() {
var firstName = document.getElementById('fname').value;
var phoneNumber = document.getElementById('phonenumber').value;
function firstNameValid () {
if (firstName == "") {
console.log("First name empty")
return false;
} else {
return true;
};
};
function phoneValid () {
if (phoneNumber == null || phoneNumber == "" || phoneNumber.length < 10) {
console.log("Phone number must be defined and not exceed 10 characters")
return false;
} else {
return true;
}
};
return firstNameValid() && phoneValid();
}; <body>
<form name="registration" action="page2.html" onsubmit="return validateForm()" method="GET">
<ul>
<li>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname"><br>
</li>
<li>
<label for="phonenumber">Phone Number:</label><br>
<input type="text" id="phonenumber" name="phonenumber">
</li>
</ul>
<button type="submit" value="Submit">Submit</button>
</form>
</body>