我知道有关此主题的问题很多,但没有一个类似于我的。因此,我有一个正在创建的新游戏网站,我想呼吁两个完全不同的功能。一个函数要求用户验证表单,另一个函数应在验证表单后立即显示欢迎消息。
我尝试了很多方法,但我用谷歌搜索,但都没有成功。而且,虽然我已经检查过代码,但代码没有运行,并且一切都很好,但是仍然没有运行。
function validateFormSubmission() {
let firstName = document.getElementById('firstName').value;
let lastName = document.getElementById('lastName').value;
if (firstName == null || firstName == "") {
alert("First Name shouldn't be empty");
return false;
} else if (lastName == null || lastName == "") {
alert("Last Name shouldn't be empty");
return false;
} else {
return true;
}
}
function showWelcomeMessage() {
let firstName = document.getElementById('firstName').value;
let lastName = document.getElementById('lastName').value;
document.getElementById('outputDiv').innerHTML = 'Hey Gamer' + firstName + lastName + ', Welcome ' + '!';
}
<body>
<form onsubmit="return validateFormSubmission()">
<table>
<tr>
<td>Your first name-</td>
<td><input type="text" name="firstName"></td>
</tr>
<tr>
<td>Your last name-</td>
<td><input type="text" name="lastName"></td>
</tr>
</table>
</form>
<form onclick="showWelcomeMessage()"></form>
<input type="submit" value="Let's play" />
<hr>
<div id="outputDiv">
</div>
</body>
</html>
答案 0 :(得分:1)
您在这里可能不需要两种形式,第二种形式什么也不做。表单上的onclick处理程序也很奇怪
您实际上可以在第一个函数validateFormSubmission
中创建一个Promise,并根据其成功或失败调用第二个函数
function validateFormSubmission() {
// returning a promise, so depending on returned value, next step can be processed
return new Promise(function(resolve, reject) {
let firstName = document.getElementById('firstName').value;
let lastName = document.getElementById('lastName').value;
if (firstName == null || firstName == "") {
alert("First Name shouldn't be empty");
return false; // it can also be reject(false)
} else if (lastName == null || lastName == "") {
alert("Last Name shouldn't be empty");
return false;
} else {
return resolve(true) // validation is successful so return true
}
})
}
function showWelcomeMessage() {
let firstName = document.getElementById('firstName').value;
let lastName = document.getElementById('lastName').value;
document.getElementById('outputDiv').innerHTML = 'Hey Gamer' + firstName + lastName + ', Welcome ' + '!';
}
document.getElementById('myForm').addEventListener('submit', function(e) {
//since button type is submit so prevent the default behavior
e.preventDefault();
validateFormSubmission().then(function(x) {
//x will be true is validation is successful
if (x) {
showWelcomeMessage()
}
})
})
<form id="myForm">
<table>
<tr>
<td>Your first name-</td>
<td><input type="text" id="firstName"></td>
</tr>
<tr>
<td>Your last name-</td>
<td><input type="text" id="lastName"></td>
</tr>
</table>
<button type="submit" value="Let's play">Lets Play</button>
</form>
<hr>
<div id="outputDiv">
</div>
答案 1 :(得分:0)
您只需要在第一个函数内调用第二个函数,就可以使您的事情正常工作。
function validateFormSubmission(){
let firstName = document.getElementById('firstName').value;
let lastName = document.getElementById('lastName').value;
if (firstName==null || firstName==""){
alert("First Name shouldn't be empty");
return false;
}
else if (lastName==null || lastName==""){
alert("Last Name shouldn't be empty");
return false;
}
else{
return showWelcomeMessage();
}
}
function showWelcomeMessage(){
let firstName = document.getElementById('firstName').value;
let lastName = document.getElementById('lastName').value;
document.getElementById('outputDiv').innerHTML = 'Hey Gamer' + firstName + lastName + ', Welcome ' + '!';
return true;
}
答案 2 :(得分:0)
如果showWelcomeMessage()
返回true,只需调用validateFormSubmission()
函数:
function validateAndShowMessage() {
if (validateFormSubmission()) {
showWelcomeMessage();
}
}
function validateFormSubmission() {
let firstName = document.getElementById('firstName').value;
let lastName = document.getElementById('lastName').value;
if (firstName == null || firstName == "") {
alert("First Name shouldn't be empty");
return false;
} else if (lastName == null || lastName == "") {
alert("Last Name shouldn't be empty");
return false;
} else {
return true;
}
}
function showWelcomeMessage() {
let firstName = document.getElementById('firstName').value;
let lastName = document.getElementById('lastName').value;
document.getElementById('outputDiv').innerHTML = 'Hey Gamer ' + firstName + " " + lastName + ', Welcome ' + '!';
}
<body>
<form onsubmit="validateAndShowMessage(); return false;">
<table>
<tr>
<td>Your first name-</td>
<td><input type="text" id="firstName"></td>
</tr>
<tr>
<td>Your last name-</td>
<td><input type="text" id="lastName"></td>
</tr>
</table>
<input type="submit" value="Let's play" />
</form>
<div id="outputDiv">
</div>
</body>
</html>