Href在形式上有问题

Question

我正在尝试创建一个表单，如果字段为空，该表单将发出警报，或者如果字段不为空，则会将用户带到一个新页面(该页面确实存在(。我曾尝试用"input"替换"button"，但仍然不希望

<div id='signupbox'>
<div class="formbox">
<h1>My first contact form</h1>
<p style="color:red;">Anything With a * is required</p>
<br>
<form name="app-form" onsubmit="return validateForm()" method="post">      
<input name="Fname" id='Fname' type="text" class="feedback-input" placeholder="Fname" />   
<input name="Email" id='Email' type="text" class="feedback-input" placeholder="Email" />
<select name="languages" id="lang" class="feedback-input">
<option value="javascript">Select a language</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
<textarea name="Text" id='Text' class="feedback-input" placeholder="Comment"></textarea>
<button type='submit' onclick="return validateFormData(); Link();" >SUBMIT</button>
</form>

</div>
</div> 

</body>
<script>
function validateForm() {
let x = document.forms["app-form"]["Fname"].value;
let y = document.forms["app-form"]["Email"].value;
if ((x == "") || (y=='')) {
alert("Required Fields Must be Filled Out.");
return false;}}
function Link(){
document.location.href = "SuccessPage.html";
}

</script>

Answer 1

如果情况是通过显示警报来警告用户，oninvalid属性也会发出警报：

<input 
name="Fname" 
id='Fname' 
type="text" 
class="feedback-input" 
oninvalid="alert('Required Fields Must be Filled Out.!');" placeholder="Fname" />   

<input 
name="Email" 
id='Email' 
type="text" 
class="feedback-input" 
oninvalid="alert('Required Fields Must be Filled Out.!');" placeholder="Email" />

有关详细信息，请查看有效事件属性中的HTML。

Answer 2

您的onClick方法错误。应该是这样的：

<button type='submit' onclick="validateFormData()" >SUBMIT</button>

在validateFormData方法中，您应该检查以确保表单有数据，如果有，则调用Link((方法。如果没有，则显示警报。

Answer 3

首先，如果你想要一个好的表单页面，你必须防止默认行为像页面续订，这样你就可以有一个很好的表单验证过程。我编辑了你的代码，请使用这个。

<div id='signupbox'>
<div class="formbox">
<h1>My first contact form</h1>
<p style="color:red;">Anything With a * is required</p>
<br>
<form name="app-form" method="post">      
<input name="Fname" id='Fname' type="text" class="feedback-input" placeholder="Fname" />   
<input name="Email" id='Email' type="text" class="feedback-input" placeholder="Email" />
<select name="languages" id="lang" class="feedback-input">
<option value="javascript">Select a language</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
<textarea name="Text" id='Text' class="feedback-input" placeholder="Comment"></textarea>
<button type='submit' id="button" >SUBMIT</button>
</form>

</div>
</div> 

</body>
<script>
document.getElementById("button").addEventListener("submit", function validateForm(e) {
e.preventDefault();
let x = document.getElementById("Fname").value;
let y = document.getElementById("Email").value;
if (!x || !y) {
alert("Please fill required areas.")
return
} else {
window.location.href="/SuccessPage.html"
}}
)
</script>