0
我是新来的JavaScript和我有点卡住...旁边显示输入字段的错误信息，如果输入字段为空
我有一个表格，我试图产生的错误信息输入字段旁边是空白的或者没有包含正确的信息。
不幸的是没有做任何事情... 感谢您的帮助！
我的HTML：
<form name="user_details" method="post" onsubmit="return checkform()">
<table id="form_table">
<tr>
<td class="form_cell"><label for="first_name">First Name:</label></td>
<td class="form_cell"><input type="text" id="first_name">*</td>
<td id="error_first_name">The first name field needs to contain at least one character.</td>
</tr>
<tr>
<td class="form_cell"><label for="surname">Surname:</label></td>
<td class="form_cell"><input type="text" id="surname">*</td>
<td id="error_surname">The surname field needs to contain at least one character.</td>
</tr>
<tr>
<td class="form_cell"><label for="address">Address:</label></td>
<td class="form_cell"><input type="text" id="address">*</td>
<td id="error_address">The address field needs to contain at least one character.</td>
</tr>
<tr>
<td class="form_cell"><label for="city">City:</label></td>
<td class="form_cell"><input type="text" id="city">*</td>
<td id="error_city">The city field needs to contain at least one character.</td>
</tr>
<tr>
<td class="form_cell"><label for="post_code">Post Code:</label></td>
<td class="form_cell"><input type="text" id="post_code">*</td>
<td id="error_post_code">The post code field needs to contain a number.</td>
</tr>
<tr>
<td class="form_cell"><label for="email">Email:</label></td>
<td class="form_cell"><input type="email" id="email">*</td>
<td id="error_email">The email field needs to contain an email address.</td>
</tr>
<tr>
<td class="form_cell"><label for="phone_number">Phone Number:</label></td>
<td class="form_cell"><input type="text" id="phone_number"></td>
</tr>
</table>
<input type="submit"><input type=reset>
</form>
我的javascript：
function checkform() {
var ok = true,
first_name,
surname,
address,
city,
post_code,
email;
if (document.getElementById("first_name").value == "") {
document.getElementById("first_name").style.borderColor = "red";
$("#error_first_name").show();
ok = false;
}
else if (document.getElementById("surname").value == "") {
document.getElementById("surname").style.borderColor = "red";
$("#error_surname").show();
ok = false;
}
else if (document.getElementById("address").value == "") {
document.getElementById("address").style.borderColor = "red";
$("#error_address").show();
ok = false;
}
else if (document.getElementById("city").value == "") {
document.getElementById("city").style.borderColor = "red";
$("#error_city").show();
ok = false;
}
else if (document.getElementById("post_code").value == "") {
document.getElementById("post_code").style.borderColor = "red";
$("#error_post_code").show();
ok = false;
}
else if (document.getElementById("email").value == "") {
document.getElementById("email").style.borderColor = "red";
$("#error_email").show();
ok = false;
}
else if (!/^[A-Za-z]+$/.test(document.getElementById("first_name").value)) {
document.getElementById("first_name").style.borderColor = "red";
ok = false;
}
else if (!/^[A-Za-z]+$/.test(document.getElementById("surname").value)) {
document.getElementById("surname").style.borderColor = "red";
ok = false;
}
else if (!/^[A-Za-z]+$/.test(document.getElementById("address").value)) {
document.getElementById("address").style.borderColor = "red";
ok = false;
}
else if (!/^[A-Za-z][0-9]+$/.test(document.getElementById("city").value)) {
document.getElementById("city").style.borderColor = "red";
ok = false;
}
else if (!/^[0-9]+$/.test(document.getElementById("post_code").value)) {
document.getElementById("post_code").style.borderColor = "red";
ok = false;
}
else if (!/\[email protected]\S+/.test(document.getElementById("email").value)) {
document.getElementById("first_name").style.borderColor = "red";
ok = false;
}
else {
return ok;
}
}
我的CSS：
#error_first_name {
display: none;
}
#error_surname {
display: none;
}
#error_address {
display: none;
}
#error_city {
display: none;
}
#error_post_code {
display: none;
}
#error_email {
display: none;
}
不要把它放在其他条件！它将返回所有你的条件作为一个结果，所以放在外面如果其他条件'返回正常;'删除'else {}' –