Eingaben mit validate() einer Komponente prüfen

jComponent 20 · jcomponent@20 jcomponentfrontendvalidationforms Mit jComponent 20 ausgeführt

Eine Komponente, die einen Wert bearbeitet, kann ihn validieren. Definiere self.validate(value) und gib true (oder einen leeren String) zurück, wenn der Wert gültig ist, oder false (oder eine Meldung), wenn nicht. Schreibe den Wert mit self.modify(value) zurück: Es markiert die Komponente außerdem als modified und touched.

jComponent hält diese Zustände in config (invalid, touched, modified) und als CSS-Klassen (ui-invalid, ui-touched, ui-modified), sodass das Styling keinen Code braucht. ERRORS(path, callback) liefert die ungültigen Komponenten unterhalb eines Pfads, was ein Formular vor dem Absenden braucht, und RESET(path) löscht die Zustände touched und modified.

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<style>.ui-invalid input { border: 2px solid crimson; }</style>

	<ui-component name="required" path="form.name"></ui-component>
	<ui-component name="required" path="form.email"></ui-component>

	<script>

		COMPONENT('required', function(self) {

			self.make = function() {
				self.html('<input type="text" />');
				self.find('input').on('input', function() {
					self.modify(this.value);
				});
			};

			self.validate = function(value) {
				return !!value && value.length > 2;
			};

			self.setter = function(value) {
				self.find('input').val(value || '');
			};
		});

		SET('form.name', 'Peter');
		SET('form.email', '');

	</script>

</body>
</html>

Probiere es in deinem Browser aus

Bearbeite das Beispiel und führe es aus. Es läuft in einem isolierten Frame in deinem Browser; nichts wird an unseren Server gesendet.

Code

Vorschau