隐藏div错误jquery symfony

Question

我正在尝试使用jQuery和Twig找到隐藏div的方法。 div显示错误消息列表，但在验证表单后，div仍未隐藏。您可以在下面的图片中看到结果：

jQuery代码：

errorPlacement: function(error, element) {
            //var node = document.createElement("LI");
            //node.appendChild(error);
            //document.getElementById("errorlist").appendChild(node);
           // jQuery('.errorsubmit ul').append(error);
            jQuery('.errorsubmit').append(error);
        },
        /*Gestion de l'affichage du bloc des erreurs */
        invalidHandler: function(event, validator) {

            var errors = validator.numberOfInvalids();
            if (errors)
            {
                jQuery(".errorsubmit").show();
            }
            else
            {
                jQuery(".errorsubmit").hide();
            }
        }
        , ignore: ':hidden:not("#contact_datacontact_focus")'


    });

Twig代码：

<div class="blockResult errorsubmit">
    <h3> Vérification des informations saisies</h3>
    <div>
        <strong>Certaines Erreurs vous empêchent de poursuivre</strong>
        {% if errors|length > 0 %}
        <ul>
            {% for error in errors %}
                <li><label class="error">  {{ error.messageTemplate }}</label></li>
            {% endfor %}
        </ul>
        {% endif %}
    </div>
</div>

当列表中没有错误时，我会尝试自动隐藏错误块。

抱歉，我不会说英语。

Answer 1

我想如果你将模板更改为：

{% if errors|length > 0 %}
<div class="blockResult errorsubmit">
    <h3> Vérification des informations saisies</h3>
    <div>
        <strong>Certaines Erreurs vous empêchent de poursuivre</strong>
        <ul>
            {% for error in errors %}
                <li><label class="error">  {{ error.messageTemplate }}</label></li>
            {% endfor %}
        </ul>

    </div>
</div>
{% endif %}

jQuery hack将是多余的。或者我省略了什么？

Answer 2

   /*Validation du formulaire principal*/
/*On cache le bloc d'affichage des erreurs récupérées par JS*/
jQuery(".errorsubmit").hide();
var validator = $('#form_register').validate({
    wrapper: "li",
    highlight : function(target, errorClass) {
        // $(target).addClass("invalidElement");

        $(".errorsubmit").show();
    },
    unhighlight : function(target, errorClass) {
        $(target).removeClass("invalidElement");
        var errors = validator.numberOfInvalids();

        if(errors == 0) {
            $(".errorsubmit").hide();
        }
    },
    rules: {
        'contact[phone]': {
            required: true,
            'regex': /^(\+[3]{2}|0)[0-9]{6,12}$/
        },


        'contact[datacontact][email][first]': {
            required: true,
            'email': true,
            maxlength: 50


        },

    },
    /*Gestion des messages d'erreur*/
    messages: {

        'contact[phone]': {
            required: "Veuillez renseigner votre tél. mobile.",
            'regex': "Le numéro de tel. mobile est incorrect."
        },

        'contact[datacontact][email][first]': {
            required: 'Veuillez renseigner votre email.',
            'email': "Veuillez renseigner un email valide.",
            maxlength: "Votre adresse email doit faire au plus 50 caractères."

        },
    },

    errorPlacement: function(error, element) {
        //var node = document.createElement("LI");
        //node.appendChild(error);
        //document.getElementById("errorlist").appendChild(node);
        jQuery('.errorsubmit ul').append(error);
    },
    submitHandler: function(form) {
        jQuery(".errorsubmit").hide();

        /*-----------------------------------*/
        jQuery(form).ajaxSubmit({
            target: "#form_content",
            beforeSubmit: preSubmitMainForm, // pre-submit callback
            success: postSubmitMainForm,
            error: function() {
                var img505 = $('#form_content').data('505');
                var redirect = $('#form_content').data('redirect');
                $('#form_content').html('<center><img src="' + img505 + '"><br/> ERREUR INTERNE.<br/><a href="' + redirect + '"><u>Retour</u></a></center>');
            }
        });

        /*-------------------------------------*/
        // form.submit();
    }