Validera indata med en komponents validate()

jComponent 20 · jcomponent@20 jcomponentfrontendvalidationforms Körd med jComponent 20

En komponent som redigerar ett värde kan validera det. Definiera self.validate(value) och returnera true (eller en tom sträng) när värdet är giltigt, eller false (eller ett meddelande) när det inte är det. Skriv tillbaka värdet med self.modify(value): det markerar också komponenten som modified och touched.

jComponent håller dessa tillstånd i config (invalid, touched, modified) och som CSS-klasser (ui-invalid, ui-touched, ui-modified), så att formatering inte kräver någon kod. ERRORS(path, callback) returnerar de ogiltiga komponenterna under en sökväg, vilket ett formulär behöver innan det skickas, och RESET(path) rensar tillstånden touched och 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>

Prova det i din webbläsare

Redigera exemplet och kör det. Det körs i en isolerad ram i din webbläsare; ingenting skickas till vår server.

Kod

Förhandsvisning