所以我正在为一个网站制作一个注册表单,但它并没有完全正常工作。只有前五个条目才会让你继续进行,直到你把它们填满,但是在城市之后,即使其他人没有填写,它仍然会通过。我无法弄清楚我需要添加什么来防止它从提交,除非所有部分都填写完毕。请帮忙,谢谢。
<script>
function validateForm(){
if ((document.forms["myForm"]["fname"].value == "") || (document.forms["myForm"]["fname"].value == null))
{
alert("First Name is required!");
return false;
}
if ((document.forms["myForm"]["lname"].value == "") || (document.forms["myForm"]["lname"].value == null))
{
alert("Last Name is required!");
return false;
}
if ((document.forms["myForm"]["email"].value == "") || (document.forms["myForm"]["email"].value == null))
{
alert("Email is required!");
return false;
}
if ((document.forms["myForm"]["street"].value == "") || (document.forms["myForm"]["street"].value == null))
{
alert("Street is required!");
return false;
}`
if ((document.forms["myForm"]["city"].value == "") || (document.forms["myForm"]["city"].value == null))
{
alert("City is required!");
return false;
}
if ((document.forms["myForm"]["Postal Code"].value == "") || (document.forms["myForm"]["Postal Code"].value == null))
{
alert("Postal Code is required!");
return false;
}
if ((document.forms["myForm"]["gender"].value == "") || (document.forms["myForm"]["gender"].value == null))
{
alert("Gender is required!");
return false;
}
if ((document.forms["myForm"]["day"].value == "") || (document.forms["myForm"]["day"].value == null))
{
alert("Day is required!");
return false;
}
if ((document.forms["myForm"]["year"].value == "") || (document.forms["myForm"]["year"].value == null))
{
alert("Year is required!");
return false;
}
return true;
}
这是HTML
<form name="myForm" action="thanks.html" method="post" onSubmit="return validateForm()"/>
<table id="table2" style="margin-top:50px; margin-left:900px; background-image: url(images/roses.jpg);">
<tr>
<td id="label">First Name:</td>
<td id="input_fields">
<input type="text" name="fname" maxlength="15" />
<i id="star">*</i>
</td>
</tr>
<tr>
<td id="label">Last Name:</td>
<td id="input_fields">
<input type="text" name="lname" maxlength="15" /><i id="star">*</i>
</td>
</tr>
<tr>
<td id="label">E-Mail:</td>
<td id="input_fields">
<input type="text" name="email" maxlength="25" /><i id="star">*</i>
</td>
</tr>
<tr>
<td id="label">Street Address:</td>
<td id="input_fields">
<input type="text" name="street" maxlength="25" /><i id="star">*</i>
</td>
</tr>
<tr>
<td id="label">City:</td>
<td id="input_fields">
<input type="text" name="city" maxlength="25" /><i id="star">*</i>
</td>
</tr>
<tr>
<td id="label">State:</td>
<td id="input_fields">
<input type="text" name="state" maxlength="25" /><i id="star">*</i>
</td>
</tr>
<tr>
<td id="label">Postal code:</td>
<td id="input_fields">
<input type="text" name="Postal code" maxlength="25" /><i id="star">*</i>
</td>
</tr>
<tr>
<td id="label">Gender:</td>
<td id="input_fields">
Male:<input type="radio" name="gender" value="male" />
Female:<input type="radio" name="gender" value="female" />
Other:<input type="radio" name="gender" value="other" />
</td>
</tr>
<tr>
<td id="label">Date of Birth:</td>
<td id="input_fields">
<select>
<option></option>
<option>JAN</option>
<option>FEB</option>
<option>MAR</option>
<option>APR</option>
<option>MAY</option>
<option>JUN</option>
<option>JUL</option>
<option>AUG</option>
<option>SEP</option>
<option>OCT</option>
<option>NOV</option>
<option>DEC</option>
</select>
<input type="text" name="day" maxlength="2" size="4"/>
<input type="text" name="year" maxlength="4" size="4"/><i id="star">*</i>
</td>
</tr>
<tr>
<td></td>
<td id="input_fields">
<input type="submit" name="submit_button" value="Submit" />
</td>
</tr>
答案 0 :(得分:0)
在下面的代码中删除右括号后的刻度线。
if ((document.forms["myForm"]["street"].value == "") || (document.forms["myForm"]["street"].value == null))
{
alert("Street is required!");
return false;
}**`**
答案 1 :(得分:0)
使用以下内容替换邮政编码验证:
if ((document.forms["myForm"]["postalCode"].value == "") || (document.forms["myForm"]["PostalCode"].value == null))
{
alert("Postal Code is required!");
return false;
}
并将表格的邮政编码输入重命名为 postalCode ,即
<input type="text" name="postalCode" maxlength="25" /><i id="star">*</i>
请注意,validateForm函数不会检查状态。我假设你因为星号而需要它。
答案 2 :(得分:0)
问题是你的表单元素(输入,按钮等)不在表单html元素中。您需要进行2项更改:
<form/>
到<form>
,然后在表</form>
这是一个工作小提琴:https://jsfiddle.net/s9wk1kez/(在输出面板右侧滚动)
同样如前所述,您在标记中有多个ID,这是无效的HTML。如果你想要有工作标签。 (您可以单击它们以获取单选按钮,它们对应于相关按钮)您应该查看标签的文档。例如<label for="[id-of-html-element]">Male</label>