gym*_*ode 2 html javascript css forms validation
我已经在HTML表单中实现了输入验证。但是,它不会在出现任何错误时提示用户,并且仍会继续将其数据发送到测试服务器。
下面是我的代码:
<html>
<head>
<style>
input {margin: 10px 5px 10px 5px;}
select {margin: 10px 5px 10px 5px;}
</style>
<script language="JavaScript">
function validate(form1)
{ if (form1.name.value == "" || form1.surname.value == "" || form1.email.value == "" || form1.dob.value == "")
{ alert("One of the field is empty.")
form1.firstname.focus()
form1.firstname.select()
form1.lastname.focus()
form1.lastname.select()
form1.email.focus()
form1.email.select()
form1.dob.focus()
form1.dob.select()
return false
}
return true}
</script>
</head>
<body>
<form method="GET" action="http://www.test/cgi-bin/reply.pl"
onSubmit="return validate(this)">
First Name<input type="text" name="firstname"><br>
Last Name<input type="text" name="lastname"><br>
Email Address<input type="email" name="email"><br>
Date of Birth<input type="date" name="dob"><br>
Favourite Sport
<select name="sports"><br>
<option value="athletics">Athletics</option><br>
<option value="basketball">Basketball</option><br>
<option value="cricket">Cricket</option><br>
<option value="football">Football</option><br>
<option value="hockey">Hockey</option><br>
<option value="swimming">Swimming</option><br>
<option value="tennis">Tennis</option><br>
</select><br>
<input type="Submit"> <input type="reset">
</form>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
小智 5
问题是,当您使用onsubmit时,您的代码要等到提交后才能调用您的函数。处理用户提交带有必需输入空白的表单的一种方法是使用required元素:
<form>
First Name<input type="text" name="firstname" required><br>
<input type="Submit"> <input type="reset">
</form>
Run Code Online (Sandbox Code Playgroud)
https://jsfiddle.net/d43rLno5/