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

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

Can you make a runnable code snippet of your source code? That would be faster to debug and help you. — Vikasdeep Singh
– Vikasdeep Singh, Commented Jun 16, 2018 at 15:40
Angular Validation is not the same as jQuery Validate, which you've tagged. Which one are you really using? — Sparky
– Sparky, Commented Jun 16, 2018 at 15:44
Since that is a validation plugin that depends on another validation plugin (Angular Validate needs jQuery Validate), it might have been a good idea to explain all this in your OP. jQuery Validate is hugely popular and the Angular Validate plugin is very out of date and relatively obscure by comparison. — Sparky
– Sparky, Commented Jun 16, 2018 at 15:52

Sparky · Accepted Answer · 2018-06-16 16:13:33Z

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
});

answered Jun 16, 2018 at 16:13

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Steve Over a year ago

I fear @Sparky sir, that this ui-select doesn't have any id attribute. But it has a ng-change like on-select which can call a function. So, is it possible do something like this. $scope.seeme=function() { $('[name="subloc_loca"]').valid(); }

Steve Over a year ago

@Sparky. With little manipulations in the code, it worked. Thank you sir

Sparky Over a year ago

@Steve, that was the intention. Since I had no way to see your DOM and you did not post any rendered HTML markup, $('#Your-Graphical-Select-Element') was supposed to get replaced with the appropriate selector, whatever that was.

Sparky Over a year ago

@georgeawg, the hidden field and the workaround in my answer has little to do specifically with AngularJS. It's the same thing that happens with Bootstrap and any other graphical element replacements, therefore similar workarounds are required with jQuery Validate in those cases too. As far as a having a discussion about why the OP wants this or if it's "more trouble than it's worth" are things that are really off-topic for SO comments.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related