Du bist nicht eingeloggt! Möglicherweise kannst du deswegen nicht alles sehen.
  (Noch kein mods.de-Account? / Passwort vergessen?)
Zur Übersichtsseite
Hallo anonymer User.
Bitte logge dich ein
oder registriere dich!
 Moderiert von: Che Guevara


 Thema: Formulare und Validierung
erste ungelesene Seite | letzter Beitrag 
Swot

swot
Frage
Guten Abend zusammen,

ich bräuchte mal ein paar Meinungen zu meiner bisherigen Verfahrensweise. Ich bastel gerade an einem kleinen Script - im Prinzip eine Maske für den User, um Daten in eine SQL datenbank einzufügen. Die formulare validiere ich bisher mit jquery, aber eben auf recht umständliche weise á la:

 
Code:
var feld1 = $('#feld1').val();
var form_valid = true;

/* eine schleife mit der geprüft wird, ob alle pflichtfelder eine länge von > 0 haben */

/* weitere spezifische prüfungen bzgl. aufbau etc der daten, teilweise regex, teilweise plausibilisierung von integer werten) */
if(feld1 != bedingung)
{
  $('#feld1').addClass("form_invalid");
  form_valid = false;
}
else
{
  $('#feld1').removeClass("form_invalid");
}

.. weitere felder

if(!form_valid)
{
  return false;
}

// sonst: daten absenden..




So, jetzt habe ich zwei Punkte die ich bisher nicht konsequent durchgezogen habe und es gerade zu ziehen gilt:
- Alle eingabemasken nutzen AJAX, deshalb hab ich am anfang gar kein richtiges Formular (im sinne von <form>..</form>Augenzwinkern verwendet Breites Grinsen Sprich einfach inputs mit einer ID, die per jquery ausgelesen und dann per POST an eine PHP-datei gesendet. Nachteil: man kann nicht sowas wie form.serialize() verwenden und auch keinerlei form optionen.. (wie z.B.: "required")
- Wenn man forms verwendet sind die selektoren so nervig für die felder: $('#myform [name=feld1]'). Oder ist es auch legitim einem feld innerhalb eines forms id und name zu geben? das klingt ebenfalls gepfuscht.. Da die Felder unterschiedlich sind und teilweise sehr individuell validiert werden müssen, muss ich in der regel an jeden Wert ran

Dann habe ich gesehen, dass es für jquery einige plugins gibt. Z.b. das jquery validation plugin. Gefiel mir soweit sehr gut, die validierungs regeln (und auch meldungen) rein in einer .js datei zu haben (im gegensatz dazu sie im html code des formulares zu haben). Leider habe ich noch einen spezialfall, der mich glaube ich am simplen einsatz hindert: die meisten formulare werden bei mir auch erst nachträglich via AJAX ins DOM geladen. d.h. sowas wie $('myform').validate(...) funktioniert nicht traurig

Für tipps und anregungen bin ich dankbar Augenzwinkern

/e: Vielleicht ist mir auch gar nicht zu helfen? =)
[Dieser Beitrag wurde 3 mal editiert; zum letzten Mal von Swot am 29.03.2017 22:39]
29.03.2017 22:03:51  Zum letzten Beitrag
[ zitieren ] [ pm ] [ diesen post melden ]
derSenner

AUP derSenner 08.04.2020
Es ist völlig legitim id und name in einem Element zu haben.

Wenn Formulare clientseitig validiert werden müssen, würde ich mir selbst eine Validierungsklasse schreiben. Vermutlich ist das jQuery Plugin unnötig aufgeblasen, ohne da jetzt reingeschaut zu haben. Beispielsweise könntest du jedem input Element ein data-validate Attribut hinzufügen, indem steht "required,int". Das würde das Feld auf empty prüfen, und ob das Feld ein Integer ist.
Das Formular hat dann beispielsweise auch eine ID, und der Validator checkt alle Elemente darin ab (var validator = new Validator('#myForm')Augenzwinkern. Sprich, innerhalb der Validator Klasse werden alle benötigten Elemente mit in der Klasse definierten Methoden gecheckt.

Lädst du Formulare nachträglich ins DOM, wird halt jedesmal der Validator neu erstellt. Das geht auf jeden Fall, du musst das halt zur richtigen Zeit an der richtigen Stelle aufrufen.

So.
Aber.

Clientseitige Validierung ist prinzipiell kacke.
- Du kannst nicht sicher stellen, dass der User am Script herumpfuscht.
- Somit musst du sowieso auch Serverseitig erneut validieren.
- Du hast also doppelte Arbeit, wobei nur die serverseitige Validierung "sicher" ist.

Weiters.

Nur weil du AJAX verwendest heißt das nicht, dass du keine <form> Elemente benutzen kannst. Generell halte ich das für eine sehr schlecht Praktik. Die Submit-Aktion kann mittels JavaScript unterbrochen werden, und vorher validiert werden.


// Hier mal kurz, ohne Garantie, skizziert, funktioniert so sicher nicht mit copy&paste:

 
Code:
/**
 * @param {string} form Identifier pointing to the form to validate
 * @constructor
 */
function Validator(form) {
	this.form = form;
	
	this.inputs = this.form.find('input');
}

/**
 * @returns {boolean}
 */
Validator.prototype.isValid = function() {
	// lol
	var self = this;

	// Perform every check on every element
	var error = false;
	$.each(this.inputs, function(i, element) {
		var tests = $(element).data('validate').split(',');
		
		for (var i = 0; i < tests.length; i++) {
			if (tests[i] === 'required' && self.isEmpty($(element).val()) {
				error = true;
			}
			
			// ...
		}
	});

	return !error;
};

/**
 * @returns {boolean}
 */
Validator.prototype.isInt = function(value) {
	// Chech if value is int
};

/**
 * @returns {boolean}
 */
Validator.prototype.isString = function(value) {
	// Chech if value is string
};

/**
 * @returns {boolean}
 */
Validator.prototype.isEmpty = function(value) {
	// Chech if value is empty
};

// ...



$(document).ready(function() {
	var validator = new Validator('#myForm');
	
	$('#myForm').submit(function() {
		return validator.isValid();
	});
});
[Dieser Beitrag wurde 9 mal editiert; zum letzten Mal von derSenner am 31.03.2017 23:31]
31.03.2017 23:10:48  Zum letzten Beitrag
[ zitieren ] [ pm ] [ diesen post melden ]
Swot

swot
Danke schon mal für das Feedback. Ich dachte mir bereits, dass es mir angekreidet werden könnte bzgl. der rein clientseitigen Validierung. Mit den genannten Punkten gehe ich auch völlig mit, allerdings wird das Script niemals die weiten des Internets sehen zu bekommen sondern ausschließlich im lokalen Netzwerk von einem bekannten Nutzerkreis (unter Verwendung ihrer jeweiligen User-ID) verwendet, deshalb wollte ich es an der Stelle einfach halten.

 
Zitat von derSenner

Nur weil du AJAX verwendest heißt das nicht, dass du keine <form> Elemente benutzen kannst. Generell halte ich das für eine sehr schlecht Praktik. Die Submit-Aktion kann mittels JavaScript unterbrochen werden, und vorher validiert werden.



Darum gings mir das zu erfahren, deshalb muss ich noch mal nachhaken: D.h. "better practice" ist es die <form> tags zu verwenden, via JS das Submit zu unterbrechen, die Eingaben zu validieren und dann per AJAX die Daten an den Server zu senden? Also ich lese gerade nicht 100%ig heraus, was du als schlechte Praktik siehst (form tags weglassen oder verwenden).

Den Code muss ich mir erst mal in Ruhe zu Gemüte führen
01.04.2017 20:49:05  Zum letzten Beitrag
[ zitieren ] [ pm ] [ diesen post melden ]
derSenner

AUP derSenner 08.04.2020
Ein Formular mit Eingaben und einem Button gehört mit einem <form>-Tag gewrapped, dafür ist das Ding da, das macht Sinn. Es hilft ja auch dabei, vor allen Dingen für Personen die deinen Code zum ersten mal sehen, zu erkennen, wo Formulare definiert sind, und was ihre Komponenten sind. Nur weil man die native Form-Submit-Funktion nicht verwendet heißt das aber nicht, dass man sich nicht an diese Elemente halten soll. Das hat auch was damit zu tun, wenn Leute JavaScript deaktiviert haben - in dem Fall funktioniert das Formular nämlich immer noch.
Hat jetzt vielleicht in deinem abgeschlossenen Projekt keine Auswirkung, aber aus Gründen der Les- und Wartbarkeit (und damit auch wie gut man mit JavaScript das DOM beeinflussen kann) empfehle ich dir dennoch, dich an gängige HTML(5) Praktiken zu halten.

Mittels jQuery wird es eh sehr einfach, einen Hook in die Submit-Funktion einzubauen - sieht Code von mir oben oder Google.

// Es gibt sicher auch Ausnahmen wo ein <form> nicht unbedingt benötigt wird, wenn du z.B. nur ein einzelnes Text-Input Feld irgendwo alleine stehen hast.
Aber wie gesagt: Wenn es Formularfelder gibt, einen Button, <fieldset> usw., dann macht <form> immer Sinn.


http://stackoverflow.com/questions/6309214/why-use-a-form-tag-when-youre-submitting-via-ajax
http://stackoverflow.com/questions/31066693/what-is-the-purpose-of-the-html-form-tag
[Dieser Beitrag wurde 2 mal editiert; zum letzten Mal von derSenner am 01.04.2017 21:07]
01.04.2017 21:02:46  Zum letzten Beitrag
[ zitieren ] [ pm ] [ diesen post melden ]
Swot

swot
Okay, habe jetzt alles auf Form-tags umgestellt und doch erst mal auf die "native" HTML5-validierung (mit hilfe von required, pattern, type = number, etc) gesetzt. Sprich in JS ist jetzt eigentlich keine Validierung (nur noch 1-2 Plausibilisierungen) mehr. Dafür aber zusätzlich auf Serverseite eine einfache validierung hinzugefügt (falls mal einer mit einem nicht-HTML5-fähigen browser unterwegs ist..).

Danke für die hilfreichen Anmerkungen
07.04.2017 18:51:50  Zum letzten Beitrag
[ zitieren ] [ pm ] [ diesen post melden ]
 Thema: Formulare und Validierung


mods.de - Forum » Webdesign & Coding » 

Hop to:  

| tech | impressum