Validation of jquery dropdown plugin is not working using angular js

Question

I am trying to add angular js validation in my dropdown which is a jquery plugin. But my validation is not working. It is not showing error message when I dont select any option.I am using below validation using angular js-

 <div class="form-group" ng-class="{ 'has-error' : userForm.mySelect.$invalid && !userForm.mySelect.$pristine }">
  <label for="Question" style="color:#767676" class="" ng-hide="userForm.mySelect.$invalid  && !userForm.mySelect.$pristine">Choose a security Question</label>
                       <label class="error_message_text" ng-show="userForm.mySelect.$invalid  &&  !userForm.mySelect.$pristine">
                       Please choose a security Question
                        </label><br>
 <div class="company-dropdown clearfix"    style=" padding-left: 2px;">
                            <div class="form-group">
                                <select name="mySelect" id="select" class="form-control" required>
                                    <option value="">Please select a security question</option>
                                    <option value="option-1">Which is your favourite sport?</option>
                                    <option value="option-2">Where did you born?</option>
                                </select>
                            </div>
  </div></div>

Can anyone tell me how I will achieve that? I have created a plunker here- https://plnkr.co/edit/wrS7gWnWruTo7wzu7tTh?p=preview

yes, I mean ng-hide and ng-show are not working for drop down. @Erez — Aanchal
– Aanchal, Commented Jul 14, 2016 at 10:45

localhost · Accepted Answer · 2016-07-14 10:57:34Z

As I see your code on plnkr,there are two mistakes.

Your form name is myForm, then why are you using in validation "userForm.mySelect.$invalid" this should be myForm.mySelect.$invalid. So replace userForm with myForm everywhere.
take a ng-model variable for your select .

So your code will be like following .

            <body ng-app="">
            <div class="container registration-form">
            <form name="myForm" novalidate>
            <h3 style="color: #818285;">Login</h3>
            <br>

            <div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && !myForm.name.$pristine }">

            <label for="UserName" style="color:#767676" class="" ng-hide="myForm.name.$error.required && !myForm.name.$pristine ">Name</label>
            <label class="error_message_text" ng-show="myForm.name.$error.required &&  !myForm.name.$pristine">
            Please enter the name
            </label>
            <input type="text" name="name" class="form-control" ng-model="user.planNo" required>

            </div>
            <div class="form-group" ng-class="{ 'has-error' : myForm.mySelect.$invalid && !myForm.mySelect.$pristine }">
            <label for="Question" style="color:#767676" class="" ng-hide="myForm.mySelect.$invalid  && !myForm.mySelect.$pristine">Choose a security Question</label>
            <label class="error_message_text" ng-show="myForm.mySelect.$invalid  &&  !myForm.mySelect.$pristine">
            Please choose a security Question
            </label><br>
            <div class="company-dropdown clearfix"    style=" padding-left: 2px;">
            <div class="form-group">
            <select name="mySelect" ng-model="user.mySelect" id="select" class="form-control" required>
            <option value="">Please select a security question</option>
            <option value="option-1">Which is your favourite sport?</option>
            <option value="option-2">Where did you born?</option>
            </select>
            </div>
            </div></div>
            </form> 
            </div>
            <script>
            $(document).ready(function (e) {
            try {

            $("#select").msDropDown();
            } catch (e) {
            alert(e.message);
            }
            </script>

            </body>

now this is working fine. check it at https://plnkr.co/edit/ae0qVMvZDPCgsilEwFSL?p=preview

Collectives™ on Stack Overflow

Validation of jquery dropdown plugin is not working using angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related