【问题标题】:Symfony2 form validation with html5 and CANCEL buttonSymfony2 带有 html5 和 CANCEL 按钮的表单验证
【发布时间】:2013-02-07 16:44:37
【问题描述】:

我在 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 方法可以解决这个问题。

有什么想法吗?非常感谢。

【问题讨论】:

  • 如果你取消,你不想提交,不是吗?为什么不使用 href 链接并退出页面?
  • 感谢您的回答。你是对的,所以不是使用简单的提交按钮,有没有可能使用带 href 的按钮?
  • 更好的选择是使用简单的链接。它还强调了如果您想继续(大按钮)或取消(小链接)该怎么做。
  • 一侧有一个按钮,另一侧有一个取消链接,我更喜欢两个按钮,也许可以玩弄颜色。
  • 看看twitter.github.com/bootstrap/base-css.html#buttons,如果你添加了正确的类,它会将链接显示为一个按钮。有用的

标签: html validation symfony twig


【解决方案1】:

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

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

【讨论】:

  • 这应该是公认的答案:它完全符合我们的要求:当在“取消”submit 按钮上设置时,它会禁用所有字段的表单验证。这对许多设计师来说效果更好,因为您可以使用两个 submit 按钮而不是一个 submit 按钮和一个链接。它也是对页面更好的语义描述。
【解决方案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')
));

【讨论】:

  • 谢谢!由于使用 Braincrafted 的引导程序,我所做的唯一更改是添加 style="margin-left: 10px;btn-primary 到链接类。
  • @sarahg,这太棒了,谢谢,但我在将它应用到 symfony 4.1 时遇到了一些麻烦,当使用 bootstrap 4 主题时,我不得不从模板文件中删除 {% extends ,现在不知道为什么,但它有效!
【解决方案3】:

我继续我的评论:)

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

提示:当用户更改输入值时,您可以监听 javascript 事件 "onbeforeunload"。它提醒用户他将退出页面

希望对您有所帮助!

【讨论】:

    【解决方案4】:
    ->add('cancel', 'submit', array(
                'label' => 'Cancel',
                'attr' => array(                       
                        'formnovalidate'=>'formnovalidate'
                ) 
        ))
    

    【讨论】:

      【解决方案5】:

      我们可以通过 formnovalidate

      使用 HTML5 required 属性轻松禁用表单验证

      【讨论】:

        【解决方案6】:

        你也可以这样做:

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

        【讨论】:

          猜你喜欢
          • 2013-12-04
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2016-04-22
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多