javascript - 动态添加和删除要由 Parsley.js 验证的表单字段

Question

这是我的 fiddle :My Fiddle (updated)

在我的表单(ID:#form)中，输入字段根据选择输入的选定选项显示或隐藏。

每个输入及其标签都包含在 div 中，该 div 根据所选选项隐藏或显示。 select 的属性 data-children 包含选择某个选项时要显示的输入信息(JSON 格式)。

我使用 data-parsley-excluded 属性删除在欧芹验证中不可见的字段( Parsley Documentation) 。在执行欧芹方法 $('#form').destroy(); 之前，最后 $('#form').parsley();

我的 HTML:

<div class="container">
  <div class="row">
    <div class="col-sm-offset-2 col-sm-8">
         <form id="form" method="post" accept-charset="UTF-8" class="form-horizontal" data-parsley-validate="">
            <div class="form-group">
                <label class="control-label" for="question_01" style="">Question 1</label>
                <select class="form-control" name="question_01" id="question_01" required data-children="{&quot;option_01&quot;:[&quot;input_01&quot;,&quot;input_02&quot;,&quot;input_03&quot;,&quot;input_04&quot;,&quot;input_05&quot;,&quot;input_06&quot;],&quot;option_02&quot;:[&quot;input_01&quot;,&quot;input_06&quot;,&quot;input_07&quot;,&quot;input_08&quot;,&quot;input_09&quot;,&quot;input_10&quot;],&quot;option_03&quot;:[&quot;input_02&quot;,&quot;input_04&quot;,&quot;input_05&quot;,&quot;input_07&quot;,&quot;input_09&quot;,&quot;input_10&quot;,&quot;input_11&quot;]}">
                    <option value="" selected>Bitte auswählen</option>
                    <option value="option_01">Option 01</option>
                    <option value="option_02">Option 02</option>
                    <option value="option_03">Option 03</option>
                </select>
            </div>
            <div id="div_input_01" class="form-group input-div hidden">
                <label for="input_01" style="">Input 01</label>
                <input type="text" class="form-control" name="input_01" id="input_01" required>
            </div>
            <div id="div_input_02" class="form-group input-div hidden">
                <label for="input_02" style="">Input 02</label>
                <input type="text" class="form-control" name="input_02" id="input_02" required>
            </div>
            <div id="div_input_03" class="form-group input-div hidden">
                <label for="input_03" style="">Input 03</label>
                <input type="text" class="form-control" name="input_03" id="input_03" required>
            </div>
            <div id="div_input_04" class="form-group input-div hidden">
                <label for="input_04" style="">Input 04</label>
                <input type="text" class="form-control" name="input_04" id="input_04" required>
            </div>
            <div id="div_input_05" class="form-group input-div hidden">
                <label for="input_05" style="">Input 05</label>
                <input type="text" class="form-control" name="input_05" id="input_05" required>
            </div>
            <div id="div_input_06" class="form-group input-div hidden">
                <label for="input_06" style="">Input 06</label>
                <input type="text" class="form-control" name="input_06" id="input_06" required>
            </div>
            <div id="div_input_07" class="form-group input-div hidden">
                <label for="input_07" style="">Input 07</label>
                <input type="text" class="form-control" name="input_07" id="input_07" required>
            </div>
            <div id="div_input_08" class="form-group input-div hidden">
                <label for="input_08" style="">Input 08</label>
                <input type="text" class="form-control" name="input_08" id="input_08" required>
            </div>
            <div id="div_input_09" class="form-group input-div hidden">
                <label for="input_09" style="">Input 09</label>
                <input type="text" class="form-control" name="input_09" id="input_09" required>
            </div>
            <div id="div_input_10" class="form-group input-div hidden">
                <label for="input_10" style="">Input 10</label>
                <input type="text" class="form-control" name="input_10" id="input_10" required>
            </div>
            <div id="div_input_11" class="form-group input-div hidden">
                <label for="input_11" style="">Input 11</label>
                <input type="text" class="form-control" name="input_11" id="input_11" required>
            </div>
            <button type="button" class="btn btn-info btn-block btn-submit-settings">Submit</button>
        </form>
   </div>
  </div>
</div>

我的 JavaScript:

$(document).ready(function() {
    $('.btn-submit-settings').on('click', function(e) {
        window.Parsley.on('field:error', function()
        {
            console.log('Validation failed for: ', this.$element);
        });
        $('#form').submit();
    });

    $('#form select').change(function() {
        var $this = $(this);
        if ($this.data('children')) {
            $('#form').parsley().destroy();
            // Hide all child elements
            $.each($this.data('children'), function(value_id, input_id_array) {
                $.each(input_id_array, function(key, input_id) {
                    if ($('#div_' + input_id).length ) {
                        $('#' + input_id).val(null);
                        if (!$('#div_' + input_id).hasClass('hidden')) {
                            $('#div_' + input_id).addClass('hidden');
                        }
                    }
                });
            });
            // show the child elements of the selected option
            if ($this.data('children')[$this.val()]) {
                $.each($this.data('children')[$this.val()], function(key, input_id) {
                    if ($('#div_' + input_id).length )
                    {
                        if ($('#div_' + input_id).hasClass('hidden'))
                        {
                            $('#div_' + input_id).removeClass('hidden');
                        }
                    }
                });
            }
            // For all inputs inside hidden div set attribute "data-parsley-excluded" = true 
            $('#form div.input-div.hidden').find(':input').each(function() {
                var attr_data_parsley_excluded = $(this).attr('data-parsley-excluded');
                if (typeof attr_data_parsley_excluded === typeof undefined || attr_data_parsley_excluded === false) {
                    $(this).attr('data-parsley-excluded', 'true');
                }
            });
            // For all inputs inside not hidden div remove attribute "data-parsley-excluded"
            $('#form div.input-div:not(.hidden)').find(':input').each(function() {
                console.log(this.id);
                $(this).removeAttr('data-parsley-excluded');
            });

            $('#form').find(':input').each(function() {
                // Log shows that attribute is set right, seems to be ignored by parsley
                console.log('ID: ' + this.id + ' TYPE: ' + $(this).prop('nodeName') + ': excluded=' + $(this).attr('data-parsley-excluded'));
            });
            $('#form').parsley();
            $('#form').parsley().refresh();
        }
    });
});

即使属性似乎设置正确，我也无法让它工作。

字段一旦隐藏，就不再进行验证。

Answer 1

我想您应该添加属性 data-parsley-required="false"以从验证中排除隐藏字段。

我的意思是，尝试改变

<input type="text" class="form-control" name="input_01" id="input_01" required>

到此

<input type="text" class="form-control" name="input_01" id="input_01" data-parsley-required="false">

如果您想验证或不验证，只需更改属性值即可