ui-select 使用隐藏字段和 angular-validate 插件进行验证

Question

嗯，我的表单中有一个隐藏字段并试图验证 ui-select 元素。我正在使用 Angular-Validation plugin, which depends on the jQuery Validate 插件。提交时显示错误标签，但是当隐藏字段从 ng-model 获取值时，错误仍然显示，而且我无法提交表单。

这是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">

这是选项

$scope.validationOptions={
        ignore: [],
        rules: {
           subloc_loca: {
                required: true
            },
       message: {
           subloc_loca: {
                required: "Select location"
            },
            }
}

如果隐藏字段正在获取它的值，为什么错误标签没有消失。为什么会这样，我该如何实现。请帮助我

Answer 1

通常，在图形元素取代默认元素的情况下，您必须发挥创意。在这种情况下，有一个 input type="hidden" 可能正在替换 select。由于 jQuery Validate 不会在隐藏元素的值更改时自动触发，因此您必须自己以编程方式触发它。

编写一个处理程序，强制验证包含您的值的隐藏元素。

$('#Your-Graphical-Select-Element').on('focusout', function() {
     $('[name="subloc_loca"]').valid();  // force validation test
});

ui-select 使用隐藏字段和 angular-validate 插件进行验证

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

jquery-validate

angularjs

ui-select