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

时间:2017-10-10 16:54:52

标签: javascript jquery html parsley.js

这是我的小提琴:My Fiddle (updated)

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

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

我使用data-parsley-excluded属性删除欧芹验证(Parsley Documentation))中不可见的字段。 在我执行parsley方法$('#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();
        }
    });
});

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

一旦隐藏了字段,请不要进行验​​证。

3 个答案:

答案 0 :(得分: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">

如果要验证属性值,只需更改属性值

答案 1 :(得分:1)

这更像是个人意见而不是事实答案,但我认为您正试图错误地解决问题。如果我这样做,我会创建2个欧芹组“shouldValidate”和“shouldNotValidate”,并根据它们是否显示来相应地添加字段。然后,当您调用validate时,传递组名称“shouldValidate”,并且仅验证该组元素。

答案 2 :(得分:0)

修改refresh后,您可能需要在欧芹表单上调用excluded