0
Ich bin neu in JavaScript und bin ein bisschen stecken ...Display eine Fehlermeldung Feld neben dem Eingang, wenn Eingabefeld leer ist
Ich habe ein Formular und ich versuche, Fehlermeldungen neben Eingabefelder zu erzeugen, sind leer oder enthalten nicht die korrekten Informationen.
Leider tut das nichts ... Danke für Ihre Hilfe !!
Mein 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>
Mein 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;
}
}
Meine 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;
}
keine Rückkehr in sonst Bedingung! Es wird alle Ihre Bedingung als ein Ergebnis zurückgeben, also außerhalb, wenn sonst Bedingung 'return ok;' entfernen 'else {}' –