Valider la saisie avec le validate() d'un composant

jComponent 20 · jcomponent@20 jcomponentfrontendvalidationforms Exécutée avec jComponent 20

Un composant qui édite une valeur peut la valider. Définissez self.validate(value) et renvoyez true (ou une chaîne vide) quand la valeur est valide, ou false (ou un message) quand elle ne l'est pas. Réécrivez la valeur avec self.modify(value) : il marque aussi le composant comme modified et touched.

jComponent garde ces états dans config (invalid, touched, modified) et sous forme de classes CSS (ui-invalid, ui-touched, ui-modified), si bien que la mise en forme ne demande aucun code. ERRORS(path, callback) renvoie les composants invalides sous un chemin, ce dont un formulaire a besoin avant d'être soumis, et RESET(path) efface les états touched et 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>

Essayez-le dans votre navigateur

Modifiez l'exemple et exécutez-le. Il s'exécute dans un cadre isolé de votre navigateur ; rien n'est envoyé à notre serveur.

Code

Aperçu