<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
我目前正在尝试学习如何制作带有验证的JavaScript表单,并且当按下按钮时,它只会提示用户其表单已提交,并且实际上并没有将表单发送到任何地方。
最佳答案
您需要使用Event.preventDefault()
您可以here详细了解它。在事件流的任何阶段调用preventDefault
都会取消事件,这意味着实现通常不会由于事件而执行任何默认操作。
参见带有两个输入框的jsfiddle here。注意<br>
进行换行,将每个输入框放在新行上。
<script>
function validateForm(e) {
e.preventDefault();
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
<body>
<form name="myForm" action="demo_form.asp"
onsubmit="return validateForm(event)" method="post">
Name: <input type="text" name="fname"><br>
New TextBox: <input type="text" name="textBox"><br>
<input type="submit" value="Submit">
</form>
</body>
关于javascript - 如何制作带有验证的JavaScript表单,提交后不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36379271/