Javascript-Formularvalidierung mit Klasse

Anonymous · Post by **Anonymous** » 24 Dec 2025, 02:02

Ich habe das HTML5-Formular für eine Website verwendet. Ich dachte, wenn ich HTML5 verwende, wird das Formular automatisch validiert. Es funktioniert jedoch nicht für alle Bereiche des Browsers. Also musste ich Javascript verwenden. Da ich kein Javascript-Experte bin, muss ich mich mit vielen Problemen auseinandersetzen.

Hier ist die Website

1)Um die Fehlermeldung anzuzeigen, erstelle ich ein div(div id="validation") neben dem Eingabefeld. Ich habe das Div aus Javascript mit document.getElementById ausgewählt. Die eingegebene Eingabe ist jedoch nicht identisch. Es gibt viele Eingabefelder. Also muss ich das als Unterricht nutzen. Das Problem besteht darin, dass ich die Schleife/den Code für document.getElementsByClassName überhaupt nicht schreiben kann. Grundsätzlich ist es für mich nicht ratsam, die Klasse für diese div#-Validierung zu verwenden und identische IDs für die Auswahl durch Javascript zu verwenden. Denn es kann in vielen Fällen denselben Formulartyp wie auf dieser Seite geben. Wenn jemand auf das Bearbeitungssymbol klickt, wird ein Popup-Formular angezeigt. Daher sollte ich div.validation und nicht div#validation verwenden. Ich habe auch Angst wegen der Eingabe-ID. Unter dem obigen Link werden die gleichen Eingabefelder angezeigt. Wenn ich also die Eingabe anhand der ID des Formulars aus Javascript auswähle, funktioniert es möglicherweise nicht, wenn mehrere Formulare beibehalten werden. Ich kann also nicht verstehen, was ich tun soll. Kürzlich habe ich die Definition der div#validation einzeln getestet und es hat funktioniert.

(a) Schreiben Sie also bitte den Code für mindestens zwei Eingabefelder, die auf die Klasse aus Javascript abzielen. So kann ich dann das Javascript des verbleibenden Eingabefelds einfügen.
Screenshot von meinem Test:

Eine Sache, die ich nicht verwende „erforderlich“ überall, da ich Javascript verwende. Aber nachdem ich versucht habe, dass nichts funktioniert, habe ich zumindest das Attribut „erforderlich“ in das Eingabefeld von HTML eingefügt, Javascript funktioniert! Und ohne mindestens eine erforderliche Eingabedatei funktioniert Javascript nicht! Ich verstehe nicht, warum das passiert ist. Ich möchte „erforderlich“ nicht mehr verwenden.

(b) Außerdem möchte ich einen roten Hintergrund, wenn die Datei ungültig ist, wie folgt:

Wie kann ich das mit CSS oder Javascript machen?

Erforderlicher HTML-Code:

Code: Select all


Create New Job



Job ID:


Start Date:


Deadline:


Finish Date:


Budget($):


Client ID:


Client Phone Number:


Client Email address:


Bidder ID:


Number of Supervisor:

Select
1
2
3


Odesk Profile Link:


Owner Type:
Member
Employee

Message:

CSS:

Code: Select all

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
a {
text-decoration: none;
}

.clear { clear: both; }

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
display: block;
}

h1 {
font-size: 26px;
}

body {
background: #fff;
font-family: sans-serif;
color: #333;
font-size: 12px;
line-height: 1em;
}
.wrapper {
width: 1000px;
margin: 0 auto;
position: relative;
background: #fff;
}
header.page_title {
background: #E3E3E3;
border-radius: 7px 7px 7px 7px;
color: #333;
padding: 20px;
margin: 40px 0 0 0;
}
.form {
width: 800px;
margin: 20px 0 0 2px;
border: none;
background: #fff;
}
form {
border: none;
background: #fff;
}

.form label {
display: block;
text-align: left;
width: 200px;
float:left;
margin: 5px 0 0 20px;
font-size: 15px;
}
.form label.text_label {
width: auto;
display: inline;
margin: 5px 20px 15px 10px;
}
.form input, .form select {
float:left;
font-size:13px;
margin: 0 0 10px 0;
padding: 0;
}
.form input:required {

}
input:valid {
border: 1px solid #909090;

}
input[type=text]:invalid, input[type=date]:invalid, input[type=number]:invalid, input[type=email]:invalid, input[type=tel]:invalid, input[type=url]:invalid, textarea:invalid {
border: 1px solid #FF0000;

}

.form input[type=text], .form input[type=date], .form input[type=number], .form input[type=email], .form input[type=tel], .form input[type=url] {
width: 500px;
height: 27px;
border: 1px solid #909090;
border-radius: 3px;
}
.form input[type=file] {
width: 500px;
}
.form select {
width: 500px;
height: 27px;
line-height: 27px;
padding: 3px 0 0 0;
border: 1px solid #909090;
border-radius: 3px;
}
.form input[type="radio"] {
margin: 5px 0 0 0;
}
.form textarea {
float: left;
width: 500px;
height: 82px;
margin: 0 0 10px 0;
padding: 0;
font-size: 13px;
border: 1px solid #909090;
}
.form input[type="submit"] {
margin: 10px 0 20px 220px;
width: 100px;
height: 30px;
background: #FF6D1F;
text-align: center;
line-height: 30px;
color: #FFFFFF;
font-size: 13px;
font-weight: bold;
border: none;
box-shadow: 0 1px 3px rgba(38, 151, 72, 0.5), 0 1px 0 #9FE662 inset;
border-radius: 5px;
cursor: pointer;
}
.form input[type="submit"]:hover {
background: #FF822E;
}

input[type=text]:focus, textarea:focus, input[type=search]:focus, input[type=date]:focus, input[type=number]:focus, input[type=email]:focus, select:focus, input[type=tel]:focus, input[type=url]:focus {
background: #fff;
border-color: #595959;
-webkit-box-shadow: 0px 0px 6px 0px rgba(103, 102, 106, .7);
box-shadow: 0px 0px 6px 0px rgba(103, 102, 106, .7);
outline: none;
}
#validation {
background: #EAEAEA;
width: 165px;
height: 18px;
/*opacity: .5;*/
border: 1px solid #A69E7C;
float: left;
margin: -20px 0 0 -110px;
padding: 7px 5px 10px 10px;
border-radius: 0 0 7px 7px;
box-shadow: 0 0 2px #888;
color: #000;
line-height: 14px;
position: relative;
display: none;
}
input[type=radio] #validation {
margin-left: -10px;
}
.arrow {
width: 14px;
height: 15px;
position: absolute;
background: url(../images/arrow-down.png) no-repeat;
bottom: -15px;
left: 77px;
z-index: 120;
}

Javascript:

Code: Select all

var submit = document.getElementById("submit");
submit.onclick = function() {
var job_id = document.getElementById("job_id").value;
var validation = document.getElementById("validation");
var form = document.getElementById("form");

if(job_id == "") {
validation.style.display = 'block';
validation.innerHTML = "ID cannot be left empty";

arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}

var start_date = document.getElementById("start_date").value;
if(start_date == "") {
validation.innerHTML = "Please, Enter the date";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}

var deadline = document.getElementById("deadline").value;
if(deadline == "") {
validation.innerHTML = "Please, Enter the deadline";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}

var finish_date = document.getElementById("finish_date").value;
if(finish_date == "") {
validation.innerHTML = "Please, Enter the finish date";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}

var budget = document.getElementById("budget").value;
if(isNaN(budget)) {
validation.innerHTML = "Enter Numeric Value here.";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);

}else if(budget == "") {
validation.innerHTML = "Please, Enter the Budget";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}

var client_id = document.getElementById("client_id").value;
if(client_id == "") {
validation.style.display = 'block';
validation.innerHTML = "ID cannot be left empty";

arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}

var phone = document.getElementById("phone").value;
if(isNaN(phone)) {
validation.innerHTML = "Enter Numeric Value here.";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);

}else if(phone == "") {
validation.innerHTML = "Please, Enter the Phone number";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else if(phone.length < 7) {
validation.innerHTML = "Phone Number should be at least 7 chars";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else if(phone.length > 11) {
validation.innerHTML = "Phone Number should be at best 11 chars";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}

var email = document.getElementById("email").value;
var atpos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");
if(email == "") {
validation.style.display = 'block';
validation.innerHTML = "Please, enter email address";

arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else if(atpos

Javascript-Formularvalidierung mit Klasse

Javascript-Formularvalidierung mit Klasse ⇐ CSS

Quick Reply