ui-select validate with hidden field and angular-validate plugin - angularjs

Question

Well, I have a hidden field in my form and trying to validate the ui-select element. I'm using the Angular-Validation plugin, which depends on the jQuery Validate plugin. On submit it shows the error label, but when the hidden fields gets it value from the ng-model, the error is still shown and also i am not able to submit the form.
Here's the html
<ui-select ng-model="noPostData.locaopt.id" theme="selectize">
<ui-select-match placeholder="Select Location">
{{$select.selected.name}}
</ui-select-match>
<ui-select-choices repeat="obj.id as obj in locaoptions | filter: {name: $select.search}">
<div ng-bind-html="obj.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<input type="hidden" name="subloc_loca" ng-model="noPostData.locaopt.id">
Here's the options
$scope.validationOptions={
ignore: [],
rules: {
subloc_loca: {
required: true
},
message: {
subloc_loca: {
required: "Select location"
},
}
}
If the hiddden field is getting its value, why the error label is not going away. Why is this happening and how can i achieve this. Please help me

Answer 1

Typically, in these situations where a graphical element replaces the default, you have to get creative. In this case there is a input type="hidden" that is presumably replacing the select. Since jQuery Validate does not get automatically triggered when the value of the hidden element changes, you have to programmatically trigger this yourself.
Write a handler that forces validation of the hidden element that contains your value.
$('#Your-Graphical-Select-Element').on('focusout', function() {
$('[name="subloc_loca"]').valid(); // force validation test
});