Formular Validator

[Yaslaw]

Ich brauche für ein Formular ein Javascript basierter Validator der
a) gut dokumentiert ist
b) aktuelle gehalten wird (also die Entwicklung noch nicht eingestellt ist)
c) weit verbreitet ist (denn da findet man einfacher Hilfe *g*)

Bitte nicht nur ein Link posten, sonder noch ganz kurz dazu schreiben warum du mir diesen oder jenen Validator empfiehlst.

Merci.

 

[Parantatatam]

Findet man dazu nicht einiges, wenn man nach jQuery-Plugins sucht? Oder muss dein Validator etwas spezielles können?

 

[Yaslaw]

Ich habe noch nie mit JQuery gearbeitet. Und laut Kurzbeschreibung zu JQuery hab ich grad nicht herausgefunden ob JQuery für Formular-Validierung geeignet ist.

Was es können soll(gut das du fragst, hab ich vergessen aufzulistenl):
- Eine Kommaliste überprüfen ob es nicht mehr als x Stichworte sind
- Mittels Ajax gegen die DB prüfen ob ein Wert schon in der DB exisitiert (also einfache Ajax-Unterstützung)
- Abhängige Dropdwons unterstützen (ok, ist nicht direkt Validierung)
- Eine Liste flexibel erweitern (ist auch keine Validierung - mist). Also ich habe eine Auflistung mit Pfaden für ein Upload. mit einem Add-Knopf soll der User ein weiterer Pfad angeben können.

Das wärs so im groben

Nachtrag: Meine Erfahrungslevel in Sachen Javascript ist sehr tief. Darum sollte es auch gut dokumentiert sein.

 

[Parantatatam]

Eine Kommaliste ist bei dir was? Ist das ein normales Eingabefeld, in dem man Werte durch Kommata getrennt eingibt?

 

[Yaslaw]

Eine Kommaliste ist bei dir was? Ist das ein normales Eingabefeld, in dem man Werte durch Kommata getrennt eingibt?

Jepp, ganau das. Es geht um eine Stichwortliste. Da macht sowas am meisten Sinn.

 

[ComFreek]

Schnell mal was geschrieben:

var YHelper =
{
	checkCommaList: function(listStr, maxCount, delimiter)
	{
			delimiter = delimiter || ",";
			return (listStr.split(delimiter).length <= maxCount);
	},
	existenceCheck: function(options, callback)
	{
		options = options || [];
		options.method = (options.method || "POST").toUpperCase();

		var xhr = new XMLHttpRequest();
		xhr.open(options.method, options.script, true);
		xhr.onload = function()
		{
			if (typeof options.checkValue == "function")
				return callback.call(xhr, options.checkValue(xhr.responseText));
			else
				return callback.call(xhr, (options.checkValue == xhr.responseText));
		}
		if ( options.method == "POST" )
		{
			xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xhr.send(options.postData);
		}
		else
		{
			xhr.send(null);
		}
	},
	dependentSelect: function(which, from, callback)
	{
	  from.addEventListener("change", function()
		{
			var newData = callback.call(from, from.value);
			var newHTML = "";
			which.innerHTML = "";
			for ( var value in newData )
			{
			  newHTML += "<option value='"+value+"'>"+newData[value]+"</option>";
			}
			which.innerHTML = newHTML;
		});
	}
};

Und noch eine Test-HTML- und PHP-Datei:
Anhang anzeigen YHelper.zip

 

[Parantatatam]

Das Problem ist hier jedoch mal wieder, dass die Methode addEventListener nicht alle Browser kennen und man deshalb dort lieber jQuery nutzen sollte, das die entsprechende Methode für den genutzten Browser aussucht und verwendet.

 

[ComFreek]

Ich stimme dir zu, aber für addEventListener()-Support kann man folgendes hinzufügen:

function addEvt(obj, evt, callback, useCapture)
{
  if ( document.body.addEventListener )
    obj.addEventListener(evt, callback, useCapture);
  else
    obj.attachEvent("on"+evt, callback);
}

// für obiges Beispiel
addEvt(from, "change", function()
{
  // ...
});

(von: https://developer.mozilla.org/en/DOM/element.addEventListener)

 

[Parantatatam]

Man muss teilweise noch einen Schritt weitergehen:

function addEvent(element, event, callback)
{
  if(element.addEventListener)
  {
    element.addEventListener(event, callback, false);
  }
  else if(element.attachEvent)
  {
    element.attachEvent('on' + event, callback);
  }
  else if(element['on' + event] === undefined)
  {
    element['on' + event] = callback;
  }
  else
  {
    var temp = element['on' + event];
    element['on' + event] = function ()
    {
      temp.call(this);
      callback.call(this);
    }
  }
}

 

[Yaslaw]

Sorry ComFreek
Ich such keine Schnelle Lösung die grad das abdeckt was ich in dem Fall brauche. Ich suche ein Javascript-Framework das Dokumentiert ist und das schon mehrfach getestet ist. Es bringt mir nix wen ich deinen Code einfach kopiere und später nicht anzupassen weiss.

@crack
Ich habe mal bei JQuery versucht herauszufinden welche Plugins mir helfen können - Naja, ich versteh da leider nur Bahnhof. Es sind zig kleine Spezialanpassungen die ich gefunden habe. Aber nix wo ich grad durchsehe.
Ich glaub ich muss mal einige Stunden intensives Dokumentationstudium machen um herauszufinden ob das auch nur annähernd das kann und welches der tausenden Plugins mir helfen tut.

Allgemein:
Ich will kein Script selber machen. Es gibt sicher fertige Frameworks die meine Bedürfnisse abdecken.
Ansonsten mache ich es über Ajax und führe alle Überprüfungen in PHP durch - dort weiss ich wie es geht.