clicktrend/frontend-validation-bundle

jQuery frontend validation as symfony2 bundle

ClicktrendFrontendValidationBundle

jQuery Validation using Symfony2 Constraints and Twitter Bootstrap., _(*1)

Installation

Install this bundle using composer, _(*2)

composer.phar require clicktrend/frontend-validation-bundle:dev-master, _(*3)

Register the bundle in àpp/AppKernel.php`, _(*4)

// app/AppKernel.php
public function registerBundles()
{
    return array(
        // ...
        new Clicktrend\Bundle\FrontendValidationBundle\ClicktrendFrontendValidationBundle(),
    );
}

Add assets files to assetic bundle in app/config/config.yml, _(*5)

assetic:
    assets:
        jquery_validation:
            inputs:
                - %kernel.root_dir%/../vendor/reactive-raven/jq-bootstrap-validation/src/jqBootstrapValidation.js
            output: js/jqBootstrapValidation.js

Add js/jqBootstrapValidation.js to project, _(*6)

Usage

Example for annotation usage, _(*7)

/**
 * @Assert\NotBlank(groups={"registration_finish"})
 * @Assert\Length(
 *      min="4", 
 *      max="12",
 *      minMessage = "form.username.min_length",
 *      maxMessage = "form.username.max_length",
 *      groups={"registration_finish"})
 */
protected $username;

Actually only four constraints are implemented: Email, Length, NotBlank and Regex., _(*8)

Example HTML form, _(*9)

<form class="form-horizontal" action="{{ path('registration') }}" {{ form_enctype(form) }} method="POST" novalidate>
    {{ form_widget(form)}}
    <!-- detailed example
    <div class="row-fluid">
        <div class="control-group">
            <div class="controls-row">
                {{ form_widget(form.email, { 'attr': {'id': 'email-field', 'class': 'span12', 'placeholder': 'form.email.label'|trans(), 'data-validation-required-message': 'form.email.not_blank'|trans(), 'data-validation-email-message': 'form.email.not_valid'|trans()} }) }}
                <div class="help-block"></div>
                <small> {{ 'form.email.help'|trans() }} {{ form_errors(form.email) }}</small>
            </div>
        </div><!-- End .control-group  -->
    </div><!-- End .row-fluid  -->
    -->
</form>

Tip

To validate NotBlank with validation script add "novalidate" attribute to form element to skip HTML5 validation., _(*10)