1

Select drop down and radio button validation is not working. Please find the code below. HTML required option is already there in the tag but still it is not working. What I am I missing?

Here's the plunker

<!DOCTYPE html>
<html ng-app="myApp" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script>
            var app = angular.module('myApp', []);

            app.controller('MainCtrl', function ($scope) {
                $scope.cityArray = ["hyderabad", "secunderabad", "delhi", "mumbai"];
                $scope.submit = function ($event) {
                    if ($scope.myForm.$invalid) {
                        // Or some other update
                        $scope.myForm.$submitted = true;
                        $event.preventDefault();
                    }
                }
            });
        </script>

        <title>Registration Form</title>
    </head>
    <body ng-controller="MainCtrl">
        <div class="container">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-login">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <h2 class="text-muted">Registration form</h2>
                                <div>
                                    <form name="myForm" action="RegistrationServlet.do" method="POST" >
                                        First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname" placeholder="First Name" required/>
                                        <span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span>
                                        <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.uname.$error.required">Please fill field above<br></span><br/>

                                        Last name:<input type="text" class="form-control input-sm" name="lname" ng-model="lname" ng-pattern="/^[a-zA-Z]{3,20}/" required placeholder="Last Name"/>
                                        <span style="color:red" ng-show="myForm.lname.$error.pattern">Last name cannot be less than 3 letters with no digits</span><br/>
                                        <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.lname.$error.required">Please fill field above<br></span>

                                           Password:
                                            <input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd" ng-minlength="3" ng-model="pwd" required placeholder="Password"/>
                                            <span style="color:red" ng-show="myForm.pwd.$error.minlength">password cannot be less than 3 letters</span><br/>
                                            <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.pwd.$error.required">Please fill field above<br></span>
                                            Confirm Password:<input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-minlength="3" ng-model="pwd2" required placeholder="Confirm Password"/>
                                            <span style="color:red" ng-show="myForm.pwd2.$error.minlength">password cannot be less than 3 letters</span>
                                            <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.pwd2.$error.required">Please fill field above<br></span><br/>

                                            Gender: <input type="radio" name="female" ng-model="color1" value="female" ng-required="!color1"/>Female <input type="radio" name="male" ng-model="color1" value="male" ng-required="!color1"/>Male <br/><br/>

                                            Mobile:<input type="text" class="form-control input-sm" name="mobile" ng-pattern="/^[7-9][0-9]{9,9}$/" ng-model="mobile" required placeholder="Mobile"/>
                                            <span style="color:red" ng-show="myForm.mobile.$error.pattern">Please enter a valid mobile number</span><br/>
                                            <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.mobile.$error.required">Please fill field above<br></span>

                                            Email:<input type="email" class="form-control input-sm" name="email" ng-pattern="/\S+@\S+\.\S+/" ng-model="email" required placeholder="Email"/>
                                            <span style="color:red" ng-show="myForm.email.$error.pattern">Invalid email address</span><br/>
                                            <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.email.$error.required">Please fill field above<br></span>

                                            Address:<textarea class="form-control input-sm" name="address" ng-model="address" required placeholder="Address"></textarea>
                                            <span style="color:red" ng-show="myForm.address.$error.require == true">Address cannot be empty</span>
                                            <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.address.$error.required">Please fill field above<br></span><br/>

                                            Street:<input type="text" class="form-control input-sm" name="street" ng-model="street" required placeholder="Street"/>
                                            <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.street.$error.required">Please fill field above<br></span><br/>

                                            Area:<input type="text" class="form-control input-sm" name="area" ng-model="area" required placeholder="Area"/>
                                            <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.area.$error.required">Please fill field above<br></span><br/>

                                            City:  <select ng-model="citySelection" class="form-control" ng-options="city for city in cityArray" required>
                                                <option value="">(Pick One)</option>
                                            </select>
                                            <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.citySelection.$error.required">Please fill field above<br></span><br/>

                                            State: <input type="text" class="form-control input-sm" name="state" ng-model="state" required placeholder="State"/>
                                            <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.state.$error.required">Please fill field above<br></span><br/>

                                            Country: <input type="text" class="form-control input-sm" name="country" ng-model="country" required placeholder="Country"/>
                                            <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.country.$error.required">Please fill field above<br></span><br/>

                                            Pin:<input type="text" class="form-control input-sm" ng-pattern="/^\d{6,6}$/" name="pin" ng-model="pin" required placeholder="Pin"/>
                                            <span style="color:red" ng-show="myForm.pin.$error.pattern">Only six-digit number is allowed</span>
                                            <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.pin.$error.required">Please fill field above<br></span><br/>

                                            <button class="form-control btn btn-success" type="submit" ng-click="submit($event)">Submit</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>            
    </body>
</html>
Improve this question
2
  • @Vamsi V What do you mean Commented Jun 22, 2015 at 9:54
  • Forget about jQuery when using angular, use ng-model ="selectedValue" in select tag, it will automatically update the value in controller when you select some other option, you can get the value of the select box in controller by using $scope.selectedValue Commented Jun 22, 2015 at 10:04

4 Answers 4

Reset to default
2

Here is updated plunker

You forgot to assign name attribute to select and use it for error display:-

For example name="city" and used it for ng-if="myForm.$submitted && myForm.city.$error.required"

City: <select name="city" ng-model="citySelection" class="form-control" ng-options="city for city in cityArray" required>
    <option value="">(Pick One)</option>
</select>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.city.$error.required">Please fill field above<br></span><br/>

In case of radio button you didn't use same name attribute name="gender" for the same and didn't mention error <span> :-)

Gender: <input type="radio" name="gender" ng-model="color1" value="female" ng-required="!color1"/>Female <input type="radio" name="gender" ng-model="color1" value="male" ng-required="!color1"/>Male <br/><br/>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.gender.$error.required">Please fill field above<br></span>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

In case of radio button and city dropdown validation, you should remove $event.preventDefault(); in your controller code. This solved the problem completely.

See the working plunkr "http://plnkr.co/edit/TnIfWhcKESRHJFPPisNl?p=preview"

Add the following for gender to display messages on screen and also change the name attribute to a single common value say"gender":

Gender: <input type="radio" name="gender" ng-model="color1" value="female" ng-required="!color1"/>Female <input type="radio" name="gender" ng-model="color1" value="male" ng-required="!color1"/>Male <br/><br/>

<span style="color:red" ng-show="myForm.gender.$error.require == true">Select Gender</span>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.gender.$error.required">Please fill field above<br></span><br/>

Moreover add the following for city to display messages on screen and add "name" attribute to the city name = "city":

City:  <select ng-model="citySelection" name = "city" class="form-control" ng-options="city for city in cityArray" required>
                                                <option value="">(Pick One)</option>
                                            </select>
<span style="color:red" ng-show="myForm.city.$error.require == true">city cannot be empty</span>

<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.city.$error.required">Please fill field above<br></span><br/>
Improve this answer

5 Comments

Updated the plunkr check again.
Also any idea how can I match passwords?
You will need a directive or some business logic in controller to acheive the same, will try to update the plunkr for the same. And do upvote the answer if you find it useful.
@Nikihil Sure I will :)
I found this "plnkr.co/edit/w3DHTWWqzWMrOYRp3n7i?p=preview" plunkr for matching the input fields, you can incorporate it in your project. Hope this will help.
1

For the city field,Assign a name to the select tag,and in the validation run the service error on that name tag...i.e(myForm.sample.$error.required)

  Here is the code for drop down validation 

  <select name="sample" ng-model="citySelection" class="form-control" ng-options="city for city in cityArray" required>
   <option value="">(Pick One)</option>
</select>
 <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.sample.$error.required">Please fill field above<br></span><br/>
Improve this answer

1 Comment

Do the same for radio buttons also
0

use this 

City:  <select name="dd" ng-model="citySelection" class="form-control" ng-options="city for city in cityArray" required>
                                                <option value="">(Pick One)</option>
                                            </select>
                                            <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.dd.$error.required">Please fill field above<br></span><br/>
Improve this answer

1 Comment

assigning name to dropdown and using the same in myForm.name.$error.required

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.