Question

我在使用on-blur验证的复杂表单上实现了parsley。

我遇到了一个问题，我通过表单，逐个验证字段，然后根据下拉列表更改，我必须破坏Parlsey对象以修改验证和有效字段不再有效。

如何保留已经验证的字段。

例如说我有以下内容：

<input type="text" id="1">
<input type="text" id="2">
<select id="select">
    <option id=1>1</option>
    <option id=2>2</option>
    <option id=3>3</option>
</select>
<input type="text" id="3">
<input type="text" id="4">
<input type="text" id="5">

情境：

我在ID = 1和ID = 2文本框中输入数据，成功类被添加为文本框中的I tab。
我将选择框更改为选项2
我摧毁欧芹
从ID = 1和ID = 2文本框

目前我正在做以下事情：

$("#form").parsley().destroy();
$('#form').parsley({
    successClass: "valid",
    errorClass: "invalid",
    errorsWrapper: '<div></div>',
    errorTemplate: '<p></p>'
}).validate('section');

这是做什么

重新验证所有字段

我在寻找什么

我需要ID = 1且ID = 2才能在销毁后保持有效。

Answer 1

当你致电destroy()时，Parsley的所有东西都被摧毁了。这意味着将销毁所有类，消息（DOM），对象和事件。

如果您正在寻找维护UI方面的方法，可以使用 not-so-pretty 解决方案来实现：

在您的样式中，.valid { ...}添加另一个类：.valid, .fake-valid { ... }。对invalid执行相同的操作。
在致电destroy()之前，浏览所有字段并检查是否有课程valid或invalid
如果是，请应用名为fake-valid或fake-invalid的课程。
使用事件parsley:form:init，再次遍历字段并将其类从fake-...更改为正确的类。

Parsley将验证字段，但维护用户界面。

选中JsFiddle。

<style>
    .valid, .fake-valid {
        color: #468847;
        background-color: #DFF0D8;
        border: 1px solid #D6E9C6;
    }

    .invalid, .fake-invalid {
        color: #B94A48;
        background-color: #F2DEDE;
        border: 1px solid #EED3D7;
    }
</style>

<form id="myForm" method="post">
    <input type="text" id="1" data-parsley-trigger="focusout" required />
    <input type="text" id="2" data-parsley-trigger="focusout" required />
    <select id="select">
        <option id=1>1</option>
        <option id=2>2</option>
        <option id=3>3</option>
    </select>
</form>

<script>
    $(document).ready(function() {
        var parsleyOpts = {
            successClass: "valid",
            errorClass: "invalid",
            errorsWrapper: '<div></div>',
            errorTemplate: '<p></p>'
        };

        var ParsleyForm = $("#myForm").parsley(parsleyOpts);

        $("#select").on('change', function() {
            // before destroy, add fake class
            for (var i in ParsleyForm.fields) {
                var elem = ParsleyForm.fields[i].$element;
                if (elem.hasClass('valid'))
                    elem.addClass('fake-valid');
                else if(elem.hasClass('invalid'))
                    elem.addClass('fake-invalid');
            }

            ParsleyForm.destroy();

            ParsleyForm = $("#myForm").parsley(parsleyOpts);
        });

        // when parlsey is initialized, lets see if the fields have fake classes
        // if so, add parsley classes
        $.listen('parsley:form:init', function(formInstance) {
            for (var i in formInstance.fields) {
                var elem = formInstance.fields[i].$element;

                if (elem.hasClass('fake-valid'))
                    elem.toggleClass('fake-valid valid')

                if (elem.hasClass('fake-invalid'))
                    elem.toggleClass('fake-invalid invalid');
            }
        });
    });
</script>

Parsley.js销毁并验证已经验证的字段

情境：

这是做什么

我在寻找什么

1 个答案: