Merge pull request #44 from formapro/JsFormValidatorBundle-43

#43 Custom init  #40 Init separated forms

Author: Yuri Maltsev

.travis.yml

@@ -13,13 +13,13 @@ before_script:
   - export DISPLAY=:99.0
   - sleep 4
 
-  - curl http://getcomposer.org/installer | php
-  - php composer.phar require --no-update symfony/symfony=$SF_VERSION
-  - php composer.phar install --dev
+  - composer require "symfony/symfony":"${SF_VERSION}"
+  - composer install -n
 
   - Tests/app/console assets:install Tests/app
   - sudo chmod -R 0777 Tests/app/cache Tests/app/logs
   - sudo chmod 0777 Resources/public/js/fp_js_validator.js
+  # just show the current directory tree
   - ls -R | grep ":$" | sed -e 's/:$//' -e 's/[^-][^\/]*\//--/g' -e 's/^/   /' -e 's/-/|/'
 
   - sudo apt-get update > /dev/null
@@ -28,12 +28,12 @@ before_script:
   - sudo sed -i -e "s,/var/www,$(pwd)/Tests/app,g" /etc/apache2/sites-available/default
   - sudo /etc/init.d/apache2 restart
 
-  - curl http://selenium.googlecode.com/files/selenium-server-standalone-2.33.0.jar > selenium.jar
+  - curl http://selenium.googlecode.com/files/selenium-server-standalone-2.35.0.jar > selenium.jar
   - java -jar selenium.jar > selenium.log &
   - sleep 4
 
 script: phpunit -v
-after_script:
-  - php vendor/bin/coveralls -v
+#after_script:
+#  - php vendor/bin/coveralls -v
 after_failure:
   - cat selenium.log

Exception/UndefinedFormException.php

@@ -0,0 +1,7 @@
+<?php
+namespace Fp\JsFormValidatorBundle\Exception;
+
+class UndefinedFormException extends \Exception
+{
+    
+} 

Factory/JsFormValidatorFactory.php

@@ -1,6 +1,7 @@
 <?php
 namespace Fp\JsFormValidatorBundle\Factory;
 
+use Fp\JsFormValidatorBundle\Exception\UndefinedFormException;
 use Fp\JsFormValidatorBundle\Form\Constraint\UniqueEntity;
 use Fp\JsFormValidatorBundle\Model\JsConfig;
 use Fp\JsFormValidatorBundle\Model\JsFormElement;
@@ -153,6 +154,16 @@ public function createJsConfigModel()
         return $model;
     }
 
+    /**
+     * Returns the current queue
+     *
+     * @return \Symfony\Component\Form\Form[]
+     */
+    public function getQueue()
+    {
+        return $this->queue;
+    }
+
     /**
      * Add a new form to processing queue
      *
@@ -177,21 +188,32 @@ public function inQueue(Form $form)
         return isset($this->queue[$form->getName()]);
     }
 
+    /**
+     * Removes from the queue elements which are not parent forms and should not be processes
+     *
+     * @return $this
+     */
+    public function siftQueue()
+    {
+        foreach ($this->queue as $name => $form) {
+            $blockName = $form->getConfig()->getOption('block_name');
+            if ('_token' == $name || 'entry' == $blockName || $form->getParent()) {
+                unset($this->queue[$name]);
+            }
+        }
+
+        return $this;
+    }
+
     /**
      * @return JsFormElement[]
      */
     public function processQueue()
     {
         $result = array();
-
         foreach ($this->queue as $form) {
-            $name = $form->getName();
-            $blockName = $form->getConfig()->getOption('block_name');
-            if ('_token' != $name && 'entry' != $blockName && !$form->getParent()) {
-                $model = $this->createJsModel($form);
-                if ($model) {
-                    $result[] = $model;
-                }
+            if (null !== ($model = $this->createJsModel($form))) {
+                $result[] = $model;
             }
         };
 
@@ -527,17 +549,39 @@ public function getJsConfigString()
     }
 
     /**
+     * @param string $formName
+     * @param bool   $onLoad
+     *
+     * @throws \Fp\JsFormValidatorBundle\Exception\UndefinedFormException
      * @return string
      */
-    public function getJsValidatorString()
+    public function getJsValidatorString($formName = null, $onLoad = true)
     {
-        $models = $this->processQueue();
+        $onLoad = $onLoad ? 'true' : 'false';
+        $this->siftQueue();
+
+        $models = array();
+        // Process just the specified form
+        if ($formName) {
+            if (!isset($this->queue[$formName])) {
+                $list = implode(', ', array_keys($this->queue));
+                throw new UndefinedFormException("Form '$formName' was not found. Existing forms: $list");
+            }
+            $models[] = $this->createJsModel($this->queue[$formName]);
+            unset($this->queue[$formName]);
+        } else { // Or process whole queue
+            $models = $this->processQueue();
+        }
+        // If there are no forms to validate
+        if (!array_filter($models)) {
+            return '';
+        }
 
         $result = array();
         foreach ($models as $model) {
-            $result[] = 'FpJsFormValidator.addModel(' . $model . ');';
+            $result[] = "FpJsFormValidator.addModel({$model}, {$onLoad});";
         }
 
-        return '<script type="text/javascript">' . implode("\n", $result) . '</script>';
+        return implode("\n", $result);
     }
 }

README.md

@@ -61,7 +61,8 @@ Make sure that your security settings do not prevent these routes.
 After the previous steps the javascript validation will be enabled automatically for all your forms.
 
 1. [Disabling validation](Resources/doc/2_1.md)<a name="p_2_1"></a>
-2. [Issue with sub-requests](Resources/doc/2_2.md)<a name="p_2_2"></a>
+2. [If your forms are placed in sub-requests](Resources/doc/2_2.md)<a name="p_2_2"></a>
+3. If you need to initialize JS validation for your forms separately, or by some event, in this case you need to follow [these steps](Resources/doc/2_3.md) instead of the [chapter 1.3](#p_1_3)
 
 ## 3 Customization<a name="p_3"></a>
 

Resources/doc/2_3.md

@@ -0,0 +1,78 @@
+### 2.3 Custom initialization
+
+So, you have added this part into your template
+```twig
+<html>
+    <head>
+        {{ include('FpJsFormValidatorBundle::javascripts.html.twig') }}
+    </head>
+    <body>
+
+    </body>
+</html>
+```
+
+Let's look at what's inside:
+```twig
+<script src="{{ asset('bundles/fpjsformvalidator/js/fp_js_validator.js') }}" type="text/javascript"></script>
+{{ js_validator_config() }}
+{{ init_js_validation() }}
+```
+
+- the first line loads JS library
+- the second one sends some parameters to this library
+- the third line - this function processes all the forms which have been added to a queue before, and creates for each one its own JS validation model. So that if you have two or more forms on a page - all of them are processed by this function.
+
+And if you want customize the initialization, you should leave the first and second lines at the header
+```twig
+<html>
+    <head>
+        <script src="{{ asset('bundles/fpjsformvalidator/js/fp_js_validator.js') }}" type="text/javascript"></script>
+        {{ js_validator_config() }}
+    </head>
+    <body>
+
+    </body>
+</html>
+```
+and use the third line right at those places where you need it.
+
+This function has three parameters:
+```js
+    init_js_validation(form = null, onLoad = true, wrapped = true)
+```
+
+- ```form``` By default this function processes all the forms which are added to the current queue. But if you want process only one specified form - put here a form name or a FormView instance of the necessary form.
+For example, you have ```comment``` and ```user``` forms on a page:
+```twig
+    {{ form(comment) }}
+    init_js_validation(comment)
+    ...
+    ...
+    {{ form(user) }}
+    init_js_validation(user)
+```
+
+- ```onLoad``` By default JS validation models are initialized on DocumentReady event, but if you need to init it later, on some other event, then you have to disable default behavior:
+```twig
+    {{ form(form) }}
+    init_js_validation(null, false)
+```
+- ```wrapper``` this parameter just defines if the result should be wrapped with ```<script type="text/javascript">...</script>``` tag
+
+For example, you need to initialize JS validation only after an ajax request:
+```twig
+    {{ form(user) }}
+    <script type="text/javascript">
+        $.ajax({
+            ...
+            ...
+            complete: function() {
+                {{ init_js_validation(null, false, false) }}
+            }
+        });
+    </script>
+```
+- ```null``` means that all the available forms will be initialized
+- first ```false``` means that initialization will be performed right at the moment when the 'complete' function is called
+- second ```false``` means that JS code will not be wrapped with the 'script' tag

Resources/public/js/FpJsFormValidator.js

@@ -347,12 +347,16 @@ var FpJsFormValidator = new function () {
     this.constraintsCounter = 0;
 
     //noinspection JSUnusedGlobalSymbols
-    this.addModel = function (model) {
+    this.addModel = function (model, onLoad) {
         var self = this;
         if (!model) return;
-        this.onDocumentReady(function () {
+        if (onLoad !== false) {
+            this.onDocumentReady(function () {
+                self.forms[model.id] = self.initModel(model);
+            });
+        } else {
             self.forms[model.id] = self.initModel(model);
-        });
+        }
     };
 
     this.onDocumentReady = function (callback) {

Resources/public/js/fp_js_validator.js

@@ -347,12 +347,16 @@ var FpJsFormValidator = new function () {
     this.constraintsCounter = 0;
 
     //noinspection JSUnusedGlobalSymbols
-    this.addModel = function (model) {
+    this.addModel = function (model, onLoad) {
         var self = this;
         if (!model) return;
-        this.onDocumentReady(function () {
+        if (onLoad !== false) {
+            this.onDocumentReady(function () {
+                self.forms[model.id] = self.initModel(model);
+            });
+        } else {
             self.forms[model.id] = self.initModel(model);
-        });
+        }
     };
 
     this.onDocumentReady = function (callback) {

Tests/BaseMinkTestCase.php

@@ -31,32 +31,59 @@ protected function setUp()
     }
 
     /**
-     * @param string $name
+     * @param string $path
      * @param null   $wait
      * @param string $submitId
      *
      * @return array
      */
-    protected function getAllErrorsOnPage($name, $wait = null, $submitId = 'form_submit')
+    protected function getAllErrorsOnPage($path, $wait = null, $submitId = 'form_submit')
     {
-        $session = $this->getMink()->getSession('selenium2');
-        $this->session = $session;
-        $session->visit($this->base . '/fp_js_form_validator/test/' . $name);
-        $session->getPage()->findButton($submitId)->click();
+        $this->visitTest($path);
+        $this->session->getPage()->findButton($submitId)->click();
 
         if ($wait) {
-            $session->wait(5000, $wait);
+            $this->session->wait(5000, $wait);
         }
 
+        return $this->fetchErrors();
+    }
+
+    protected function fetchErrors()
+    {
         $errorsList = array();
         /** @var \Behat\Mink\Element\NodeElement $item */
-        foreach ($session->getPage()->findAll('css', 'ul.form-errors li') as $item) {
+        foreach ($this->session->getPage()->findAll('css', 'ul.form-errors li') as $item) {
             $errorsList[] = $item->getText();
         }
 
         return $errorsList;
     }
 
+    /**
+     * Visit a test page
+     *
+     * @param $path
+     */
+    protected function visitTest($path)
+    {
+        $session = $this->getMink()->getSession('selenium2');
+        $this->session = $session;
+        $session->visit($this->base . '/fp_js_form_validator/test/' . $path);
+    }
+
+    /**
+     * If this was a POST request - we send something to the #extra_msg container
+     *
+     * @return bool
+     */
+    protected function wasPostRequest()
+    {
+        $extraMsg = $this->session->getPage()->find('css', '#extra_msg')->getText();
+
+        return !empty($extraMsg);
+    }
+
     /**
      * @param $selector
      *

Tests/BaseTestCase.php

@@ -3,6 +3,7 @@
 namespace Fp\JsFormValidatorBundle\Tests;
 
 use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
+use Symfony\Component\DependencyInjection\Container;
 
 /**
  * Class BaseTestCase
@@ -28,4 +29,26 @@ protected function callNoPublicMethod($obj, $methodName, array $args = array())
 
         return $method->invokeArgs($obj, $args);
     }
+
+    /**
+     * @param $name
+     *
+     * @return object
+     */
+    protected function getService($name)
+    {
+        return $this->getContainer()->get($name);
+    }
+
+    /**
+     * @return Container
+     */
+    protected function getContainer()
+    {
+        if (!self::$kernel) {
+            self::bootKernel();
+        }
+
+        return self::$kernel->getContainer();
+    }
 }