CODEWITHSUNDEEP
angularjs
kittu
kittu

Reputation: 7008

Select options and radio button validation in angularjs

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>

Upvotes: 1

Views: 4038

Answers (4)

squiroid
squiroid

Reputation: 14027

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>

Upvotes: 2

Nithin A
Nithin A

Reputation: 374

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/>

Upvotes: 0

Nikhil Batra
Nikhil Batra

Reputation: 3148

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/>

Upvotes: 2

bhanu.cs
bhanu.cs

Reputation: 1365

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/>

Upvotes: 1

Related Questions