这是我的小提琴: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="{"option_01":["input_01","input_02","input_03","input_04","input_05","input_06"],"option_02":["input_01","input_06","input_07","input_08","input_09","input_10"],"option_03":["input_02","input_04","input_05","input_07","input_09","input_10","input_11"]}">
<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();
}
});
});
我无法让它工作,即使属性似乎设置正确。
一旦隐藏了字段,请不要进行验证。
答案 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
。