使用html5和CANCEL按钮进行Symfony2表单验证

Question

我在Symfony2上有一个联系表单,我把一些验证器作为电子邮件,minLength等.所有这些字段也设置为notBlank.

因此,HTML5也验证了这些字段(对于电子邮件而非空白),这对我来说很好.

我有一个提交按钮:

<input type="submit" value="Submit"/>

问题是我有另一个提交按钮,它是一个取消按钮:

<input name="cancel" type="submit" value="Cancel" />

使用此按钮,在我的控制器中,我正在进行重定向:

if( $request->get('cancel') == 'Cancel' )
    return  $this->redirect($this->generateUrl('SciForumVersion2Bundle_homepage'));

现在,由于HTML5验证,我无法重定向,因为例如字段为空.

为了重新解决这个问题,我找到了两个解决方案,但我不喜欢它们:

1. 禁用HTML 5验证:

   <form novalidate>
   

2. 使用JavaScript

但正如我所说,我不喜欢这些方法,我相信有一些很好的Symfony方法可以解决这个问题.

任何的想法？非常感谢你.

Answer 1

使用formnovalidate以下命令为取消按钮专门禁用表单验证:

<input name="cancel" type="submit" value="Cancel" formnovalidate/>

Answer 2

我看到这是一个较老的线程,但我想提供一个替代解决方案,以防其他人发现它有用.我对这个主题的其他答案不满意,因为我想做三件事:

• 不必在每个视图模板中进行任何自定义表单渲染(我喜欢使用{{ form(form) }})
• 取消按钮出现在提交按钮旁边(非常棘手,因为如果不进行自定义渲染,symfony默认会将所有表单按钮包装在div标签中)
• 能够将取消操作设置为控制器中的选项,因为链接将根据我是否添加或编辑等而有所不同

我想在应用DRY原则的同时做到这一切.首先,我扩展了基本表单类型以允许自定义选项'cancel_action':

<?php
namespace AcmeBundle\Form\Extension;

use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\OptionsResolver\OptionsResolver;

class FormTypeExtension extends AbstractTypeExtension
{
    /**
     * {@inheritdoc}
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        parent::configureOptions($resolver);

        $resolver->setDefined('cancel_action');
        $resolver->setAllowedTypes('cancel_action', 'string');
    }

    /**
     * {@inheritdoc}
     */
    public function buildView(FormView $view, FormInterface $form, array $options)
    {
        parent::buildView($view, $form, $options);

        if (isset($options['cancel_action'])) {
            $view->vars['cancel_action'] = $options['cancel_action'];
        }
    }

    /**
     * {@inheritdoc}
     */
    public function getExtendedType()
    {
        return 'form';
    }
}

并在我的配置中注册了表单类型扩展名(使用别名'form',以便它可用于我的所有表单):

acme.form_type_extension:
    class: AcmeBundle\Form\Extension\FormTypeExtension
    tags:
        - {name: form.type_extension, alias: form}

然后我使用表单主题来扩展基本表单视图(我扩展了submit_widget块,以便取消按钮位于div标签内的提交按钮旁边):

{# AcmeBundle:Form:fields.html.twig #}

{% extends 'form_div_layout.html.twig' %}

{%- block submit_widget -%}
    {%- set type = type|default('submit') -%}
    {{ block('button_widget') }}
    {% if form.parent.vars.cancel_action is defined %}
        <a class="btn btn-default" href="{{ form.parent.vars.cancel_action }}" role="button">Cancel</a>
    {% endif %}
{%- endblock submit_widget -%}

并在我的twig配置中注册了该主题,以便它默认应用于所有表单视图:

twig:
    form_themes:
        - 'AcmeBundle:Form:fields.html.twig'

瞧瞧!现在对于每个表单,如果我想要一个取消按钮,我需要做的就是在我在控制器中初始化表单时指定取消操作作为选项:

$form = $this->createForm(new AlbumType(), $album, array(
    'cancel_action' => $this->generateUrl('album_home')
));

Answer 3

我继续我的评论:)

当处理表单（HTML5 或非 HTML5）并且您想退出时，您不需要提交和验证任何数据您只需放置一个简单的 href 链接即可更改页面。使用您最喜欢的 css 样式来获得相同的外观

提示：当用户更改输入值时，您可以监听 javascript 事件“onbeforeunload” 。它提醒用户他将退出该页面

希望有帮助！