Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using javascript in Symfony2/Twig

I have a view called contact.html.twig. It has a form with some textfields. I want to use javascript to validate that none of the fields are empty, as well as some other rules. But I do not know where to put the .js with the definitions. I do not know either how to call the .js script using the Twig notation.

like image 446
camelCase Avatar asked Jul 02 '12 16:07

camelCase


2 Answers

This is a generic answer for how to handle javascript... not specifically the validation part. The approach I use is to store individual functionality in separate JS files as plugins in the bundles Resources/public/js directory like so:

(function ($) {

    $.fn.userAdmin = function (options) {
        var $this = $(this);

        $this.on('click', '.delete-item', function (event) {
            event.preventDefault();
            event.stopPropagation();

            // handle deleting an item...
        });
    }
});

I then include these files in my base template using assetic:

{% javascripts
    '@SOTBCoreBundle/Resources/public/js/user.js'
%}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

In my base template I have a block at the end of <body> for a $(document).ready();

<script>
    $(document).ready(function () {
        {% block documentReady %}{% endblock documentReady %}
    });
</script>
</body>

Then in my page that has the "user admin" functionality I can call the userAdmin function like so:

{% block documentReady %}
    {{ parent() }}
    $('#user-form').userAdmin();
{% endblock documentReady %}
like image 174
MDrollette Avatar answered Oct 13 '22 09:10

MDrollette


Isn't basic HTML5 functionality enough for your client side validation? It is provided by the Form component. You could also check:

  • Assetic
  • Assetic article
like image 29
Codium Avatar answered Oct 13 '22 10:10

Codium