Invoer valideren met validate() van een component

jComponent 20 · jcomponent@20 jcomponentfrontendvalidationforms Uitgevoerd met jComponent 20

Een component die een waarde bewerkt, kan hem valideren. Definieer self.validate(value) en geef true (of een lege string) terug wanneer de waarde geldig is, of false (of een bericht) wanneer dat niet zo is. Schrijf de waarde terug met self.modify(value): het markeert de component ook als modified en touched.

jComponent bewaart deze statussen in config (invalid, touched, modified) en als CSS-klassen (ui-invalid, ui-touched, ui-modified), zodat opmaak geen code nodig heeft. ERRORS(path, callback) geeft de ongeldige componenten onder een pad terug, wat een formulier nodig heeft voor het verzenden, en RESET(path) wist de statussen touched en 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>

Probeer het in je browser

Bewerk het voorbeeld en voer het uit. Het draait in een geïsoleerd frame in je browser; er wordt niets naar onze server gestuurd.

Code

Voorbeeld