JavaScript Verständnisfrage zu JS Form auswerten

lolski · 28. Juli 2014

Hallo alle zusammen
Ich probiere gerade JS aus und habe folgende Frage:
Erstmal einen kleinen ausschnitt aus meiner Hmtl Datei

HTML:

<form name="check" onsubmit="return legit()" action="" method="post">

		<table cellpadding="0" border="0">
			<tr>
				<td> <h1>Adresse </h1> </td>
			</tr>
			
			<tr>
				<td>Anrede:</td>
				<td> <select name="Anrede" size="1" style="margin-left:20px" >
					<option> </option>
					<option>Frau</option>
					<option>Herr</option>
					<option>Mr Sir </option>
					</select>
				</td>
			</tr>
			
			<tr>
				<td>Titel:</td>
				<td> <select name="Titel" size="1" style="margin-left:20px">
					<option></option>
					<option>Dr.</option>
					<option>Prof.</option>
					</select>
				</td>
			</tr>
			
			<tr>
				<td>Vorname:</td>
				<td> 
				<input type="text" name="Vorname" style="background-color:#EFFBF5;margin-left:20px"/> 
				</td>
			</tr>
			
			<tr>
				<td>Nachname:</td>
				<td> 
				<input type="text" name="Nachname" style="background-color:#EFFBF5;margin-left:20px" /> 
				</td>
			</tr>
			
			<tr>
				<td>Strasse:</td>
				<td> 
				<input type="text" name="Strasse" style="background-color:#EFFBF5;margin-left:20px" /> 
				</td>
			</tr>
			
			<tr>
				<td>PLZ:</td>
				<td> 
				<input type="text" name="PLZ" style="background-color:#EFFBF5;margin-left:20px" />
				</td>
			</tr>

Dazu folgender JS code

Code:

<script type="text/javascript">

//<![CDATA[

	function legit(){
		ErrorCounter ='';
		
		if(document.check.Anrede.options[0].selected==true)	
			ErrorCounter+="Bitte w\u00fchlen Sie die Anrede aus\n";
			
			
		if (document.check.Vorname.value=="")	
			ErrorCounter+= "Das Feld Vorname wurde nicht ausgef\u00fcllt\n ";
			
			
		if (document.check.elements[3].value=="" )
			ErrorCounter+= "Das Feld Nachname wurde nicht ausgef\u00fcllt\n ";
			
		if (document.check.Strasse.value.length<10)
			ErrorCounter+= "Das Feld Strasse wurde nicht ausgef\u00fcllt\n ";
			
		if(document.check.PLZ.value.length!=5)
			ErrorCounter+= "Das Feld PLZ ist zu lang oder zu kurz\n";
			
				
		if(ErrorCounter.length>0){
		
			alert("Festgestellte Probleme:\n\n" +ErrorCounter);
			return (false);
		
								 }
									
	
			return (true);
							
							}
							




//]]>
</script>

Also das was ich mache / machen möchte ist Folgendes wenn der Benutzer bestimmte Felder nicht auswählt soll ein alert kommen,
der den User drauf hinweißt, welche Felder er noch auszufüllen hat. Erst wenn er die in JS abgefragten Felder ausfüllt wird die "Buchung" abgeschickt. Ist diese Lösung in Ordnung kann man das schneller/eleganter lösen?

Daaron · 28. Juli 2014

N paar Sachen sind da zu beachten...
1.) Formular-Validierung macht schlussendlich immer der Server. Clientseitige Validierung mittels JS ist immer Anfällig für Manipuliationen
2.) HTML5 Form Validierung rockt!
3.) Schreib nix, was andere Leute in den üblichen Frameworks schon viel besser geschrieben haben. In diesem Sinne: Ab zu jQuery oder Mootools.

Speedy. · 28. Juli 2014

Folgende Punkte fallen mir auf und würde ich anders machen:

1. Das HTML-Formular ist mit Hilfe von Tabellenmarkup geschrieben. Das mag zwar die optische Gestaltung erleichtern, ist aber heutzutage nicht mehr gern gesehen und sollte daher durch sauberes Markup ersetzt werden. Zudem verwendest du keine Labels, was die Zuordnung der Feldbezeichnungen sehr viel sinnlicher macht. Über <label> kannst du dir ein Eingabefeld verknüpfen. Zudem verwendest du Inline-CSS, was bei Gelegenheit auch vermieden werden sollte. Grundsätzlich trennt man HTML von CSS und JavaScript durch Auslagerung in separate Dateien. Ein Beispiel, wie das Formular ohne Tabellenstruktur aussehen könnte:

HTML:

<form action="" method="post">
	<p>
		<label for="anrede">Anrede:</label>
		<select name="anrede" id="anrede">
			<option value="" selected>Bitte wählen...</option>
			<option value="hr" selected>Hr.</option>
			<option value="fr" selected>Fr.</option>
		</select>
	</p>
	<p>
		<label for="vorname">Vorname:</label>
		<input type="text" name="anrede" id="anrede" required>
	</p>
</form>

2. Eingabeprüfung mit JavaScript ist zwar schön und gut, hat aber auch seine Nachteile. Was machst du z. B., wenn der Besucher deiner Seite kein JavaScript aktiv hat? Oder du eine E-Mail-Adresse als Eingabe erwartest, der User aber eine Telefonnummer eingibt? Für solche Fälle musst du dir ebenso Lösungen ausdenken. Ich persönlich arbeite gar nicht mehr mit JavaScript in solchen Fällen, sondern mit der extrem einfachen und tollen HTML5-Form Validation.

Selbst mit ausgeschaltetem JavaScript wird das Formular geprüft und du musst dir keine Sorgen um die Logik in JavaScript machen. Uralte Browser wie der Internet Explorer 8 können das zwar nicht, aber wenn du nicht auf die angewiesen bist...

HTML:

<!-- Dieses Feld ist erforderlich, der Browser lässt dich nicht absenden wenn es leer ist -->
<input type="text" required>

<!-- Akzeptiert nur E-Mail-Adressen -->
<input type="email">

<!-- Normales Textfeld, aber akzeptiert nur Zahlen von 0 - 6 -->
<input type="text" pattern="[0-6]">

3. Wenn's doch JavaScript sein soll: ich persönlich habe etwas dagegen, Skripte direkt im HTML über "onsubmit" oder so aufzurufen. Moderner und flexibler geht es mit addEventListener über JavaScript:

Code:

var form = document.querySelector("#form");
	form.addEventListener("submit", function(evt) {
		evt.preventDefault();

		if (error) {
			return false;
		}

		return true;
	}, false);

Ansonsten spricht nichts dagegen, nur einen alert würde ich nicht unbedingt auf die Seite packen, der kann auf Dauer recht nervig werden.

SymA · 28. Juli 2014

Ich würde mittels FormData arbeiten. Alle Einträge holen und eine simple Vorvalidierung machen. Den Rest wie die Vorredner geschrieben haben die HTML5 Elemente benutzen - dort musst du halt aufpassen, wenn du Cross-Browser Kompabilität herstellen möchtest.
FormData How-to: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

Smartass · 28. Juli 2014

lolski schrieb:
... kann man das schneller/eleganter lösen?

Sowohl als auch. [Run for reload]

Suche

JavaScript Verständnisfrage zu JS Form auswerten

lolski

Cadet 4th Year

Daaron

Fleet Admiral

Speedy.

Gast

SymA

Captain

Smartass

Gast

Ähnliche Themen