I have a form with several fields and you gotta pick one. So I used the 'require_from_group' functionality in jQuery validation. The elements to be validated are some select elements and one text input element. When I leverage the below validation, every element returns as false except for the first select regardless of selection/text input. Am I doing something wrong, or missing something?
function validateRule() {
validator = $('#frmRule').validate({
debug: true,
ignore: '.ignore, :disabled',
rules: {
reroute_to: {
require_from_group: [1, '.action-group']
},
rename_to: {
require_from_group: [1, '.action-group']
},
resettle_to: {
require_from_group: [1, '.action-group']
},
map_ccy_to: {
require_from_group: [1, '.action-group']
},
is_ignore: {
require_from_group: [1, '.action-group']
},
is_field_72: {
require_from_group: [1, '.action-group']
},
field_72_key: {
required: {
depends: function(e) {
return !$(e).is(':hidden');
}
}
},
field_72_value: {
required: {
depends: function(e) {
return !$(e).is(':hidden');
}
}
},
field_72_full: {
required: {
depends: function(e) {
return !$(e).is(':hidden');
}
}
}
},
groups: {
actionGroup: 'reroute_to rename_to resettle_to map_ccy_to is_ignore field_72',
},
messages: {
actionGroup: {
require_from_group: 'At least one action is required to create a rule.'
},
field_72_key: {
required: 'Both a key and value are required for a field 72 append action.'
},
field_72_value: {
required: 'Both a key and value are required for a field 72 append action.'
},
field_72_full:
{
required: 'A full field 72 value is required.'
}
},
errorLabelContainer: '.action-validation',
submitHandler: function (form, e) {
var formData = $(form).serializeArray();
var data = {};
$(form).serializeArray().map(function (x) {
data[x.name] = x.value;
});
}
});
}
HTML (snippet from larger form):
<div class="action">
<h3>I want to <strong>reroute</strong> to a <strong>
<a class="selectable" id="selected_reroute_to" href="#" data-modifier="">different
broker/BIC</a><span>.</span>
<select name="reroute_to" class="action-group" id="reroute_to" style="display: none;">
<option value="" selected>different broker/BIC</option>
% for b in brokers:
<option value="${b.id}">${b.name}</option>
% endfor
</select>
</strong>
<a href="#" class="reset"><i class="fa fa-undo"></i></a>
</h3>
</div>
<div class="action">
<h3>I want to <strong>rename</strong> the fund(s) to <strong>
<a class="textable" class="action-group" id="selected_rename_to" data-modifier="" href="#">a new
code</a><span>.</span>
<input type="text" id="rename_to" name="rename_to" data-default="a new code"
value="a new code"
style="display: none;">
</strong>
<a href="#" class="reset"><i class="fa fa-undo"></i></a>
</h3>
</div>
<div class="action">
<h3>I want to <strong>settle</strong> the trades
<strong>
<a class="selectable" class="action-group" id="selected_resettle_to" data-modifier=""
href="#">differently</a><span>.</span>
<select name="resettle_to" id="resettle_to" style="display: none;">
<option value="" selected>gross</option>
<option value="1">net</option>
</select>
</strong>
<a href="#" class="reset"><i class="fa fa-undo"></i></a>
</h3>
</div>
<div class="action" style="display: none;">
<h3>I want to remap <strong>CCY</strong> to <strong>
<a class="textable" class="action-group" id="selected_map_ccy_to" data-modifier="" href="#">a
new currency
code</a><span>.</span>
<input type="text" id="map_ccy_to" name="map_ccy_to" data-default="a new currency code"
value="a new currency code" style="display: none;">
</strong>
<a href="#" class="reset"><i class="fa fa-undo"></i></a>
</h3>
</div>
<div class="action">
<h3>I want to the trades to be
<strong>
<a class="selectable" class="action-group" id="selected_is_ignore" data-modifier=""
href="#">uploaded</a><span>.</span>
<select name="is_ignore" id="is_ignore" style="display: none;">
<option value="" selected>uploaded</option>
<option value="1">ignored</option>
</select>
</strong>
<a href="#" class="reset"><i class="fa fa-undo"></i></a>
</h3>
</div>
<div class="action">
<h3>I want <strong>Field 72</strong> values to be
<strong>
<a class="selectable" class="action-group" id="selected_field_72" data-modifier=""
href="#">unaltered</a><span>.</span>
<select name="is_field_72" id="is_field_72" style="display: none;">
<option value="" selected>unaltered</option>
<option value="1">appended</option>
</select>
</strong>
<a href="#" class="reset"><i class="fa fa-undo"></i></a>
</h3>
<div class="row" style="display: none;">
<div class="col-md-4">
<div class="form-group">
<label for="field_72_key">Field 72 Key</label>
<input type="text" class="form-control field72 ignore" name="field_72_key" id="field_72_key">
</div>
<div class="form-group">
<label for="field_72_value">Field 72 Value</label>
<input type="text" class="form-control field72 ignore" name="field_72_value"
id="field_72_value">
</div>
<div class="form-group">
<label for="field_72_full">Field 72 Field Replace</label>
<input type="text" class="form-control field72 ignore" name="field_72_full" id="field_72_full">
</div>
</div>
</div>
</div>
<div class="action-validation alert alert-danger" style="display: none;" role="alert"><span
class="glyphicon glyphicon-exclamation-sign"></span></div>
</div>
