0

我正在处理我的表单验证，我想根据我得到的错误显示不同的错误消息。我正在使用SilexandTwig和translator componentandballoon.css作为工具提示，到目前为止它可以工作。

现在我想根据我网站的语言翻译这个错误信息，我做我想做的事有些麻烦。

这是我的代码：

我的表格

<form class="my-form col-12 col-md-5">
    <div class="form-group">
        <label for="name" class="col-12">
            <input type="text" class="form-control color-light-grey" id="name" name="name" aria-describedby="name" placeholder="{{ 'input-name'|trans }}">
        </label>
        <small>www.mywebsite.com/<span id="input_name_content">______________</span></small>
    </div>
    <div class="form-group">
        <label for="name" class="col-12">
            <input type="password" class="form-control color-light-grey" id="mdp" name="mdp" placeholder="{{ 'input-password'|trans }}">
        </label>
    </div>
    <div class="form-group">
        <label for="name" class="col-12">
            <input type="password" class="form-control color-light-grey" id="confirm_mdp" name="confirm_mdp" placeholder="{{ 'input-confirm'|trans }}">
        </label>
    </div>
    <button id="create_new" type="button" class="btn bg-color-yellow hover-yellow-light">{{ 'create-pixers'|trans }}</button>
</form>

如您所见，我{{ 'key'|trans }}用来翻译我的内容，没关系。

我的JS

我有一个函数可以检查我的输入值并在遇到一个错误时创建一个错误，然后最后如果我的错误 obj 不为空，我会显示我的错误。我使用这个函数来做到这一点，它添加了一些balloon.css属性，所以我有我想要的：

function displayFormError(error) {
    $.each(error, function(key, msg) {
        $("input[name='"+key+"']").parent().parent().attr({
            "data-balloon-visible": "",
            "data-balloon-pos" : "up",
            "data-balloon" : msg
        });
        $("input[name='"+key+"']").parent().addClass("is-wrong").removeClass("is-valid");
    });
}

我的问题

当我在我的 HTML 中执行此操作时，它可以工作（我的工具提示带有空的错误消息）：

<div class="form-group" data-balloon-visible data-balloon-pos="up" data-balloon="{{ 'empty'|trans }}">
    <label for="name" class="col-12">
        <input type="text" class="form-control color-light-grey" id="name" name="name" aria-describedby="name" placeholder="{{ 'input-name'|trans }}">
    </label>
</div>

但是当我使用displayFormError(error)它msg = "{{ 'empty'|trans }}"时不起作用。

我知道这是因为我在 JS 中执行此操作，但是是否可以根据需要将我的消息从我的 JS 添加到我的 Twig 模板中？

我看到这个捆绑包可能对我有帮助，但我想找到一个我可以自己做的解决方案：https ://github.com/willdurand/BazingaJsTranslationBundle

4

2 回答 2

0

不，不可能将您的变量从 Javascript 传递给 Twig(PHP)。

我会使用https://github.com/willdurand/BazingaJsTranslationBundle来避免在您的应用程序中使用 2 个不同的翻译系统。

这样您就可以将您的 javascript 和您的消息放在同一个文件中。

如果你真的想自己做，你可以重新发明轮子：只是一些文本被另一个文本替换。或者你可以找到一个 javascript 库。

于 2018-03-05T16:11:32.280 回答
0

好吧，事实上，我设法通过在 Twig Block 中添加我的 Javascript 来解决我的问题。

所以 script.js 中的这段代码不起作用：

function displayFormError(error) {
    $.each(error, function(key, msg) {
        $("input[name='"+key+"']").parent().parent().attr({
            "data-balloon-visible": "",
            "data-balloon-pos" : "up",
            "data-balloon" : msg // msg = "{{ 'my-key'|trans }}"
        });
        $("input[name='"+key+"']").parent().addClass("is-wrong").removeClass("is-valid");
    });
}

在此处输入图像描述

但是，如果您将它添加到“my_view.html.twig”文件中的 Twig Block 中，它将：

{% block ADD_JS_CODE %}
<script type="text/javascript">
     $(document).ready(function() {

         function displayFormError(error) {
             // same code than before
         }

     });
</script>
{% endblock %}

在此处输入图像描述

这样我就可以使用我的功能来检查我的表单并根据页面中当前语言的错误添加消息，无需任何其他组件，只需 Silex + Twig + Translator ！

于 2018-03-06T12:52:29.470 回答