如何使用JavaScript验证HTML表单?

时间:2014-02-05 01:17:38

标签: javascript html forms validation

我正在使用标记创建基本调查,但我在使用JavaScript验证表单时遇到问题。我想检查所有表格而不只是一个。请帮忙!谢谢!这是代码:

<!DOCTYPE html>
<html>
<head>
<title>SurveyBot v1</title>
</head>
<body>
<form action="">
What is your first name?: <input type="text" name="firstname"><br>
What is your last name?: <input type="text" name="lastname">
</form>
<h5>What is your gender?</h5>
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<h5>Which of the following vehicles do you own? (Check all that apply):</h5>
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Scooter">I have a scooter<br>
<input type="checkbox" name="vehicle" value="Quad">I have a quad<br>
<input type="checkbox" name="vehicle" value="Snowmobile">I have a snowmobile<br>
<input type="checkbox" name="vehicle" value="Skateboard">I have a skateboard<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>
<h5>Which of the following car brands do you drive as your primary car?</h5>
<form action="">
<select name="cars">
<option value="none">None</option>
<option value="other">Other</option>
<option value="volvo">Volvo</option>
<option value="kia">Kia</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
<option value="honda">Honda</option>
<option value="mitsubishi">Mitsubishi</option>
<option value="toyota">Toyota</option>
<option value="ford">Ford</option>
</select>
</form>
<h5>Please check the box that says "I have finished" and press submit. Thank you for taking the survey.</h5>
<form name="input" action="html_form_action.html" method="get">
<input type="checkbox" name="finished" value="I am finished">I have finished<br>
<br><br>
<input type="submit" value="Submit">
</body>
</html>

1 个答案:

答案 0 :(得分:1)

只需在提交按钮附近添加JavaScript函数调用。

<input type="submit" onclick="return validateForm(this.form);" />

制作JavaScript功能。从以下链接获取帮助:link或者您可以搜索一些示例。

此外,您需要将所有内容放在单个<form></form>标记内以使其正常工作。否则,您需要一种使您的工作更加繁琐的解决方法。