formapro / JsFormValidatorBundle

The Javascript validation for Symfony 2, 3 and 4 forms
MIT License
128 stars 57 forks source link

Emedded (rendered) forms do not work on 2.5 #70

Open asentner opened 9 years ago

asentner commented 9 years ago

Tried init_js_validation() with a bunch of different options. Tried it above, below...

{# feedbackWidget.html.twig #}
{{ init_js_validation() }}
<div id="feedback" class="feedback-form-widget">
    <div id="feedback-form" class="col-xs-4 col-md-4 panel panel-default">
        {{ form(form) }}
    </div>
    <div id="feedback-tab">Feedback</div>
</div>

Tried with the below in head and footer.

{# base.html.twig #}
<head>
[...]
<script src="{{ asset('bundles/fpjsformvalidator/js/fp_js_validator.js') }}" type="text/javascript"></script>
    {{ js_validator_config() }}
    {{ init_js_validation() }}
[...]
</head>

[...]

{% render(controller('Bundle:Controller:feedback')) %}

[...]

Even tried with a click listener in jQuery to no avail.

$.jsFormValidator('submitForm')
// controller
public function feedbackAction(Request $request)
    {
        $data = [];
        $form = $this->createForm(new FeedbackType(), $data, [
            'user' => $this->get('security.context')->getToken()->getUser(),
            'action' => $this->generateUrl('support_feedback_widget'), // this is the path to the form though I plan to use ajax to submit. Tried with and without this
            'attr' => [
                'id' => 'form-feedback-widget',
            ]
        ]);

        if ($request->isMethod('POST')) {
            $form->handleRequest($request);
        }

        return $this->render('MyProjectMyBundle:Support:feedbackWidget.html.twig', [
            'form' => $form->createView(),
        ]);
    }
// form type
<?php

namespace MyProject\MyBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;
use Symfony\Component\Validator\Constraints as Assert;

class FeedbackType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('subject', 'choice', [
            'label' => false,
            'required' => false,
            'choices' => [
                'I have a billing question' => 'I have a billing question',
                'I’m confused about how something works' => 'I’m confused about how something works',
                'I’m not getting emails' => 'I’m not getting emails',
                'I think something is broken' => 'I think something is broken',
                'I have a feature request' => 'I have a feature request',
                'I have a question before I sign up' => 'I have a question before I sign up',
                'Other' => 'Other',
            ],
            'attr' => [
                'formGroupClass' => 'feedback subject',
                'class' => 'feedback-subject-choice',
                'placeholder' => 'So, what is it you need help with?',
            ],
            'constraints' => [
                new Assert\NotBlank(),
            ]
        ]);

        $builder->add('message', 'textarea', [
            'label' => false,
            'required' => false,
            'attr' => [
                'placeholder' => 'What are your questions, comments, or details?',
                'formGroupClass' => 'feedback message',
                'class' => 'feedback-message-textarea'
            ],
            'constraints' => [
                new Assert\NotBlank(),
            ]
        ]);

        $builder->add('email', 'hidden', [
            'label' => false,
            'data' => $options['user']->getEmail(),
        ]);

        $builder->add('company_name', 'hidden', [
            'label' => false,
            'data' => $options['user']->getCompanyUserXref()->getCompany()->getCompanyName(),
        ]);

        $builder->add('name', 'hidden', [
            'label' => false,
            'data' => $options['user']->getSelfContact()->getFullName(),
        ]);

        $builder->add('submit', 'submit', [
            'button_class' => 'secondary',
            'label' => 'Send',
            'attr' => [
                'formGroupClass' => 'wrapper-save-form',
                'class' => 'btn-save-form feedback-form-send',
            ],
        ]);
    }

    public function setDefaultOptions(OptionsResolverInterface $resolver)
    {
        $resolver->setDefaults([
            'user' => null,
        ]);
    }

    public function getName()
    {
        return 'feedback';
    }
}

Some JS I tried

$('button#feedback_submit').on('click', function(e) {
            $('form#form-feedback-widget').jsFormValidator('submitForm', e);
        });

Works well on regular forms. But this one form that is rendered through the Twig render(controller)) function just will not validate.

The source shows the model spitting out all the correct information.

asentner commented 9 years ago

This may possibly be related to #58. The unexpected behavior I am having is the same.