examples: updates

examples/assets/style.css

@@ -27,13 +27,21 @@ fieldset {
 	border: 1px solid #B2D1EB;
 }
 
-textarea, select, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="image"]):not([type="range"]) {
+textarea,
+select,
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="image"]):not([type="range"]) {
 	padding: .3em .5em;
 	color: black;
 	background: white;
 	border: 1px solid silver;
 }
 
+.has-error textarea,
+.has-error select,
+.has-error input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="image"]):not([type="range"]) {
+	border-color: #E22;
+}
+
 select {
 	padding-right: .3em;
 }
@@ -55,6 +63,7 @@ th {
 .error {
 	color: #E22;
 	font-weight: bold;
+	margin-left: 1em;
 }
 
 footer a {

examples/basic-example.php

@@ -42,10 +42,8 @@
 	'b' => 'blue',
 ]);
 
-$form->addText('email', 'Email:')
-	->setEmptyValue('@')
-	->addCondition($form::FILLED) // conditional rule: if is email filled, ...
-		->addRule($form::EMAIL, 'Incorrect email address'); // ... then check email
+$form->addEmail('email', 'Email:')
+	->setEmptyValue('@');
 
 
 // group Shipping address
@@ -93,8 +91,8 @@
 	->addRule($form::EQUAL, 'Passwords do not match', $form['password']);
 
 $form->addUpload('avatar', 'Picture:')
-	->addCondition($form::FILLED)
-		->addRule($form::IMAGE, 'Uploaded file is not image');
+	->setRequired(FALSE)
+	->addRule($form::IMAGE, 'Uploaded file is not image');
 
 $form->addHidden('userid');
 
@@ -114,7 +112,7 @@
 
 if ($form->isSuccess()) {
 	echo '<h2>Form was submitted and successfully validated</h2>';
-	Dumper::dump($form->getValues());
+	Dumper::dump($form->getValues(), [Dumper::COLLAPSE => FALSE]);
 	exit;
 }
 

examples/bootstrap2-rendering.php

@@ -74,7 +74,7 @@
 		$usedPrimary = TRUE;
 
 	} elseif (in_array($type, ['checkbox', 'radio'], TRUE)) {
-		$control->getLabelPrototype()->addClass($control->getControlPrototype()->type);
+		$control->getLabelPrototype()->addClass($type);
 		$control->getSeparatorPrototype()->setName(NULL);
 	}
 }

examples/bootstrap3-rendering.php

@@ -77,7 +77,7 @@
 		$control->getControlPrototype()->addClass('form-control');
 
 	} elseif (in_array($type, ['checkbox', 'radio'], TRUE)) {
-		$control->getSeparatorPrototype()->setName('div')->addClass($control->getControlPrototype()->type);
+		$control->getSeparatorPrototype()->setName('div')->addClass($type);
 	}
 }
 

examples/custom-control.php

@@ -46,12 +46,12 @@ public function setValue($value)
 
 
 	/**
-	 * @return DateTime|NULL
+	 * @return DateTimeImmutable|NULL
 	 */
 	public function getValue()
 	{
 		return self::validateDate($this)
-			? (new DateTime)->setDate($this->year, $this->month, $this->day)->setTime(0, 0)
+			? (new DateTimeImmutable)->setDate($this->year, $this->month, $this->day)->setTime(0, 0)
 			: NULL;
 	}
 

examples/custom-rendering.php

@@ -37,8 +37,8 @@
 	->setRequired('Enter your name');
 
 $form->addRadioList('gender', 'Your gender', [
-	'm' => Html::el('option', 'male')->style('color: #248bd3'),
-	'f' => Html::el('option', 'female')->style('color: #e948d4'),
+	'm' => Html::el('span', 'male')->style('color: #248bd3'),
+	'f' => Html::el('span', 'female')->style('color: #e948d4'),
 ]);
 
 $form->addSelect('country', 'Country', [

examples/html5.php

@@ -36,12 +36,9 @@
 	->addRule($form::INTEGER, 'Precision must be numeric value')
 	->addRule($form::RANGE, 'Precision must be in range from %d to %d', [0, 100]);
 
-$form->addText('email', 'Send to email:')
-	->setType('email')
+$form->addEmail('email', 'Send to email:')
 	->setAttribute('autocomplete', 'off')
-	->setAttribute('placeholder', 'Optional, but Recommended')
-	->addCondition($form::FILLED) // conditional rule: if is email filled, ...
-		->addRule($form::EMAIL, 'Incorrect email address'); // ... then check email
+	->setAttribute('placeholder', 'Optional, but Recommended');
 
 $form->addSubmit('submit', 'Send');
 

examples/live-validation.php

@@ -0,0 +1,104 @@
+<?php
+
+/**
+ * Nette Forms live validation example.
+ */
+
+
+if (@!include __DIR__ . '/../vendor/autoload.php') {
+	die('Install packages using `composer install`');
+}
+
+use Nette\Forms\Form;
+use Tracy\Debugger;
+use Tracy\Dumper;
+
+Debugger::enable();
+
+
+$form = new Form;
+$form->addText('name', 'Your name:')
+	->setRequired('Enter your name');
+
+$form->addText('age', 'Your age:')
+	->setRequired('Enter your age')
+	->addRule($form::INTEGER, 'Age must be numeric value')
+	->addRule($form::RANGE, 'Age must be in range from %d to %d', [10, 100]);
+
+$form->addPassword('password', 'Choose password:')
+	->setRequired('Choose your password')
+	->addRule($form::MIN_LENGTH, 'The password is too short: it must be at least %d characters', 3);
+
+$form->addPassword('password2', 'Reenter password:')
+	->setRequired('Reenter your password')
+	->addRule($form::EQUAL, 'Passwords do not match', $form['password']);
+
+$form->addSubmit('submit', 'Send');
+
+
+if ($form->isSuccess()) {
+	echo '<h2>Form was submitted and successfully validated</h2>';
+	Dumper::dump($form->getValues());
+	exit;
+}
+
+$renderer = $form->getRenderer();
+$renderer->wrappers['pair']['.error'] = 'has-error';
+
+?>
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Nette Forms live validation example</title>
+<link rel="stylesheet" media="screen" href="assets/style.css" />
+<script src="https://nette.github.io/resources/js/netteForms.js"></script>
+<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
+
+<script>
+function showErrors(errors, focus)
+{
+	errors.forEach(function(error) {
+		if (error.message) {
+			$(error.element).closest('tr').addClass('has-error').find('.error').remove();
+			$('<span class=error>').text(error.message).insertAfter(error.element);
+		}
+
+		if (focus && error.element.focus) {
+			error.element.focus();
+			focus = false;
+		}
+	});
+}
+
+function removeErrors(elem)
+{
+	if ($(elem).is('form')) {
+		$('.has-error', elem).removeClass('has-error');
+		$('.error', elem).remove();
+	} else {
+		$(elem).closest('tr').removeClass('has-error').find('.error').remove();
+	}
+}
+
+Nette.showFormErrors = function(form, errors) {
+	removeErrors(form);
+	showErrors(errors, true);
+};
+
+$(function() {
+	$(':input').keypress(function() {
+		removeErrors(this);
+	});
+
+	$(':input').blur(function() {
+		Nette.formErrors = [];
+		Nette.validateControl(this);
+		showErrors(Nette.formErrors);
+	});
+});
+</script>
+
+<h1>Nette Forms live validation example</h1>
+
+<?php echo $form ?>
+
+<footer><a href="https://doc.nette.org/en/forms">see documentation</a></footer>

examples/manual-rendering.php

@@ -29,8 +29,8 @@
 ]);
 
 $form->addText('email')
-	->addCondition($form::FILLED)
-		->addRule($form::EMAIL, 'Incorrect email address');
+	->setRequired(FALSE)
+	->addRule($form::EMAIL, 'Incorrect email address');
 
 $form->addSubmit('submit');