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>
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>
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/>
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/>
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/>
Related
i'm working on a school project. My project has some forms that need to be validated. Login and register form validation work well but the other form used to upload item is not validated. I have tried to figure out the error but get no result.
Note that the function works ok, just the validation get error
I'm using AngularJS 1.4.5 along with Google Firebase
This is my registration HTML code:
<form name="registerform" ng-submit="register()" novalidate>
<div class="form-group">
<p ng-show="message">{{message}}</p>
<label>First name</label>
<input type="text" name="firstname" class="form-control" placeholder="First name" ng-model="user.firstname" ng-required="true">
<p class="text-danger" ng-show="registerform.firstname.$invalid && registerform.firstname.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Last name</label>
<input type="text" name="lastname" class="form-control" placeholder="Last name" ng-model="user.lastname" ng-required="true">
<p class="text-danger" ng-show="registerform.lastname.$invalid && registerform.lastname.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Email address</label>
<input type="email" name="email" class="form-control" placeholder="Enter email" ng-model="user.email" ng-required="true">
<p class="text-danger" ng-show="registerform.email.$invalid && registerform.email.$touched">Invalid email</p>
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" placeholder="Password" ng-model="user.password" ng-minlength="6" ng-required="true">
<p class="text-danger" ng-show="registerform.password.$invalid && registerform.password.$touched">Password must have at least 6 characters</p>
</div>
<button type="submit" class="btn btn-success btn-block" ng-disabled="registerform.$invalid">Register</button><br>
Already have an account? Login
</form>
And this is my item upload form:
<p ng-show="message">{{message}}</p>
<form name="uploadItem" ng-submit="uploadItem()" novalidate>
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Food name" ng-model="foodname" ng-required="true">
<p class="text-danger" ng-show="uploadItem.name.$invalid && uploadItem.name.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Category</label>
<select class="form-control" name="category" ng-model="foodcategory" ng-required="true">
<option value="">---Please select---</option>
<option value="appetizer">Appetizer</option>
<option value="maincourse">Main Course</option>
<option value="dessert">Dessert</option>
<option value="drinks">Drinks</option>
<option value="bakery">Bakery</option>
</select>
<p class="text-danger" ng-show="uploadItem.category.$invalid && uploadItem.category.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Image</label>
<input type="text" name="image" class="form-control" placeholder="Food image" ng-model="foodimage" ng-required="true">
<p class="text-danger" ng-show="uploadItem.image.$invalid && uploadItem.image.$touched">This field is required</p>
</div>
<div class="form-group">
<label>How to cook</label>
<textarea class="form-control" rows="3" name="howtocook" placeholder="How to cook" ng-model="foodhowtocook" ng-required="true"></textarea>
<p class="text-danger" ng-show="uploadItem.howtocook.$invalid && uploadItem.howtocook.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Video</label>
<input type="text" name="video" class="form-control" placeholder="Youtube embed link" ng-model="foodvideo" ng-required="true">
<p class="text-danger" ng-show="uploadItem.video.$invalid && uploadItem.video.$touched">This field is required</p>
</div>
<button type="submit" class="btn btn-primary btn-block" ng-disabled="uploadItem.$invalid">Submit</button><br>
</form>
The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when submitted
Hye,
I tried to reproduce your scenario, and I am able to validate upload form.
Please have a look.
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<p ng-show="message">{{message}}</p>
<form name="uploadItem" ng-submit="uploadItem()" novalidate>
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Food name" ng-model="foodname" ng-required="true">
<p class="text-danger" ng-show="uploadItem.name.$invalid && uploadItem.name.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Category</label>
<select class="form-control" name="category" ng-model="foodcategory" ng-required="true">
<option value="">---Please select---</option>
<option value="appetizer">Appetizer</option>
<option value="maincourse">Main Course</option>
<option value="dessert">Dessert</option>
<option value="drinks">Drinks</option>
<option value="bakery">Bakery</option>
</select>
<p class="text-danger" ng-show="uploadItem.category.$invalid && uploadItem.category.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Image</label>
<input type="text" name="image" class="form-control" placeholder="Food image" ng-model="foodimage" ng-required="true">
<p class="text-danger" ng-show="uploadItem.image.$invalid && uploadItem.image.$touched">This field is required</p>
</div>
<div class="form-group">
<label>How to cook</label>
<textarea class="form-control" rows="3" name="howtocook" placeholder="How to cook" ng-model="foodhowtocook" ng-required="true"></textarea>
<p class="text-danger" ng-show="uploadItem.howtocook.$invalid && uploadItem.howtocook.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Video</label>
<input type="text" name="video" class="form-control" placeholder="Youtube embed link" ng-model="foodvideo" ng-required="true">
<p class="text-danger" ng-show="uploadItem.video.$invalid && uploadItem.video.$touched">This field is required</p>
</div>
<button type="submit" class="btn btn-primary btn-block" ng-disabled="uploadItem.$invalid">Submit</button><br>
</form>
</div>
Thanks for trying to help me. I figure out the way to fix this issue but it's weird.
To get the form validation work I just need to change the form name
from
<form name="uploadItem" ng-submit="uploadItem()" novalidate>
to
<form name="uploadForm" ng-submit="uploadItem()" novalidate>
and correct the following in other input tags like:
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Food name" ng-model="foodname" ng-required="true">
<p class="text-danger" ng-show="uploadForm.name.$invalid && uploadForm.name.$touched">This field is required</p>
</div>
However, it now get to other error.
This is my angular code:
$scope.uploadItem = function(){
recipesInfo.$add({
name: $scope.foodname,
category: $scope.foodcategory,
image: $scope.foodimage,
howtocook:$scope.foodhowtocook,
video:$scope.foodvideo,
date: firebase.database.ServerValue.TIMESTAMP
}).then(function(){
$scope.foodname = '';
$scope.foodimage = '';
$scope.foodcategory = '';
$scope.foodhowtocook = '';
$scope.foodvideo = '';
$scope.message = 'Success!';
});//promise
}//uploadItem
I push all of the data into Firebase then reset the input fields into blank with
.then(function(){
$scope.foodname = '';
$scope.foodimage = '';
$scope.foodcategory = '';
$scope.foodhowtocook = '';
$scope.foodvideo = '';
$scope.message = 'Success!';
});//promise
But after hitting the submit button, although data is being pushed into Firebase and input fields reset to blank, this one show up
<p class="text-danger" ng-show="uploadForm.name.$invalid && uploadForm.name.$touched">This field is required</p>
I want after hitting the submit button, the form will be reset without any error message
How do I disable the input error message showing by default below the text input boxes.
Here is my form:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${pageContext.request.contextPath}/js/Registratonvalidation.js"></script>
<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>
angular.module('myApp', []).controller("numOnlyRegex", function ($scope)
{
$scope.numOnlyRegex = /^\d{1,6}$/;
$scope.cityArray = ["hyderabad", "secunderabad", "delhi", "mumbai"];
}
.controller('FormSubmitController', function($scope) {
$scope.submit = function($event)
{
if ($scope.myForm.$invalid)
{
$scope.myForm.$submitted = true;
$event.preventDefault();
}
}); </script>
<!--<script src="${pageContext.request.contextPath}/numOnlyRegex.js"></script>-->
<title>Registration Form</title>
</head>
<body>
<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>
<!--onSubmit="return validate()"-->
<div ng-app="myApp" ng-controller="FormSubmitController" >
<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>
<!--<p ng-show="myForm.uname.$invalid && !userForm.name.$pristine" class="help-block">Your name is required.</p>-->
<br/>
Last name:<input type="text" class="form-control input-sm" name="lname" ng-model="lname" name="uname" ng-pattern="/^[a-zA-]{3,20}/" required placeholder="Last Name"/>
<span style="color:red" ng-show="myForm.lname.$error.pattern">First name cannot be less than 3 letters with no digits</span><br/>
<p>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/>
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"/><br/>
<span style="color:red" ng-show="myForm.pwd2.$error.minlength">password cannot be less than 3 letters</span><br/>
Gender: <input type="radio" name="female" ng-model="color" value="female" ng-required="!color"/>Female <input type="radio" name="male" ng-model="color" value="male" ng-required="!color"/>Male <br/><br/>
Mobile:<input type="text" class="form-control input-sm" name="mobile" ng-pattern="/^[7-9][0-9]{1,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/>
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/>
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><br/>
Street:<input type="text" class="form-control input-sm" name="street" ng-model="street" required placeholder="Street"/>
Area:<input type="text" class="form-control input-sm" name="area" ng-model="area" required placeholder="Area"/><br/>
City: <select name="citySelection" ng-model="city" ng-options="city for city in cityArray" name='city' required>
<option value="">Select city</option>
</select>
<span ng-show="myForm.citySelection.$error.required"></span>
<br/><br/>
State: <input type="text" class="form-control input-sm" name="state" ng-model="state" required placeholder="State"/>
Country: <input type="text" class="form-control input-sm" name="country" ng-model="country" required placeholder="Country"/>
Pin:<input type="text" class="form-control input-sm" ng-pattern="numOnlyRegex" 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>
<!--<input type="Submit" class="form-control btn btn-success" ng-submit="submit($event)" value="Submit" />-->
<button type="submit" class="form-control btn btn-success" ng-click="submit($event)">Submit</button>
<!--ng-disabled="myForm.$invalid"-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Link for the plunker
Try with this method:
function validateMethod() {
$scope.isValidated = true;
if($scope.uname == '') {
$scope.isValidated = false ;
}
//other custom validations
return $scope.isValidated;
}
MOdify the angular code as:
var valid = validateMethod();
if(valid)
{
$scope.submit = function($event)
{
if ($scope.myForm.$invalid)
{
$scope.myForm.$submitted = true;
$event.preventDefault();
}
});
}
I have a form where I am checking for incorrect input with ng-pattern and showing error message on incorrect entry.
I want the form submit to be disabled when user tries to submit the form with incorrect values with out using ng-disabled option because required option of html is checking for empty text boxes on clicking submit button. How do I achieve this? Do I have to go for custom directive?
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${pageContext.request.contextPath}/js/Registratonvalidation.js"></script>
<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>
angular.module('myApp', []).controller("numOnlyRegex", function ($scope)
{
$scope.numOnlyRegex = /^\d{1,6}$/;
});
</script>
<!--<script src="${pageContext.request.contextPath}/numOnlyRegex.js"></script>-->
<title>Registration Form</title>
</head>
<body>
<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>
<!--onSubmit="return validate()"-->
<div ng-app="myApp" ng-controller="numOnlyRegex">
<form name="myForm" action="RegistrationServlet.do" method="POST" novalidate >
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><br/>
Last name:<input type="text" class="form-control input-sm" name="lname" ng-model="lname" name="uname" ng-pattern="/^[a-zA-]{3,20}/" required placeholder="Last Name"/>
<span style="color:red" ng-show="myForm.lname.$error.pattern">First name cannot be less than 3 letters with no digits</span><br/>
<p>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/>
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"/><br/>
<span style="color:red" ng-show="myForm.pwd2.$error.minlength">password cannot be less than 3 letters</span><br/>
Gender: <input type="radio" name="female" ng-model="color" value="female" ng-required="!color"/>Female <input type="radio" name="male" ng-model="color" value="male" ng-required="!color"/>Male <br/><br/>
Mobile:<input type="text" class="form-control input-sm" name="mobile" ng-pattern="/^[7-9][0-9]{1,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/>
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/>
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><br/>
Street:<input type="text" class="form-control input-sm" name="street" ng-model="street" required placeholder="Street"/>
Area:<input type="text" class="form-control input-sm" name="area" ng-model="area" required placeholder="Area"/>
City: <select name="city" class="form-control" ng-model="city" required>
<option value="hyderabad">Hyderabad</option>
<option value="secunderabad">Secunderabad</option>
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
</select><br/>
State: <input type="text" class="form-control input-sm" name="state" ng-model="state" required placeholder="State"/>
Country: <input type="text" class="form-control input-sm" name="country" ng-model="country" required placeholder="Country"/>
Pin:<input type="text" class="form-control input-sm" ng-pattern="numOnlyRegex" 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>
<input type="Submit" class="form-control btn btn-success" value="Submit" />
<!--ng-disabled="myForm.$invalid"-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This link will help explain how to disable a submit button until a form is valid.
You will need to add ng-disabled="FORMNAME.$invalid" attribute to your <input type="Submit" class="form-control btn btn-success" value="Submit" /> element (replace FORMNAME with the model name for your form data).
That should do it. Comment below with any other issues.
You appear to want all fields to be required, but that when users think they're ready for form submission, they are kindly notified if they have forgotten any required fields.
Normally this is achieved with ng-submit and something like:
<span ng-if="myForm.$submitted && myForm.formField.$error.required">Please enter information for 'formField'</span>
Here the users are allowed to click submit, but are then shown a message about the required field.
However, this is only works when no action (action="RegistrationServlet.do") is specified on the form. In your case, you need to intercept form submission. One way to do that is to capture the mouse click event to disable and update the form if there are form errors:
app.controller('MainCtrl', function($scope) {
$scope.submit = function($event) {
if ($scope.myForm.$invalid) {
$scope.myForm.$submitted = true;
$event.preventDefault();
}
}
<form name="myForm" action="action.do" method="Post" novalidate>
<input type="text" name="formField" ng-model="formField" required><br>
<span class="error" ng-if="myForm.$submitted && myForm.formField.$error.required">Please fill field above<br></span>
<button type="submit" ng-click="submit($event)">Submit</button>
</form>
See the plnkr here
What you need to do is using ng-Submit so that you can do validation when user click submit.
var app = angular.module('myApp',[]);
app.controller('numOnlyRegex',function($scope){
$scope.TestSubmit = function()
{
if($scope.myForm.$valid)
{
//normal submit
}
}
});
Updated base on you plunkr
http://plnkr.co/edit/FypBs8IiHmPKJYrsR1xJ?p=preview
I have a form and I want to disable form submit when input fields are empty. I want to show an error when user clicks on submit button where the input fields are empty. I don't want to show error by default.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${pageContext.request.contextPath}/js/Registratonvalidation.js"></script>
<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>
angular.module('myApp', []).controller("numOnlyRegex", function ($scope)
{
$scope.numOnlyRegex = /^\d{1,6}$/;
});
</script>
<!--<script src="${pageContext.request.contextPath}/numOnlyRegex.js"></script>-->
<title>Registration Form</title>
</head>
<body>
<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>
<!--onSubmit="return validate()"-->
<div ng-app="myApp" ng-controller="numOnlyRegex">
<form name="myForm" action="RegistrationServlet.do" method="POST" novalidate >
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><br/>
Last name:<input type="text" class="form-control input-sm" name="lname" ng-model="lname" name="uname" ng-pattern="/^[a-zA-]{3,20}/" required placeholder="Last Name"/>
<span style="color:red" ng-show="myForm.lname.$error.pattern">First name cannot be less than 3 letters with no digits</span><br/>
<p>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/>
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"/><br/>
<span style="color:red" ng-show="myForm.pwd2.$error.minlength">password cannot be less than 3 letters</span><br/>
Gender: <input type="radio" name="female" ng-model="color" value="female" ng-required="!color"/>Female <input type="radio" name="male" ng-model="color" value="male" ng-required="!color"/>Male <br/><br/>
Mobile:<input type="text" class="form-control input-sm" name="mobile" ng-pattern="/^[7-9][0-9]{1,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/>
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/>
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><br/>
Street:<input type="text" class="form-control input-sm" name="street" ng-model="street" required placeholder="Street"/>
Area:<input type="text" class="form-control input-sm" name="area" ng-model="area" required placeholder="Area"/>
City: <select name="city" class="form-control" ng-model="city" required>
<option value="hyderabad">Hyderabad</option>
<option value="secunderabad">Secunderabad</option>
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
</select><br/>
State: <input type="text" class="form-control input-sm" name="state" ng-model="state" required placeholder="State"/>
Country: <input type="text" class="form-control input-sm" name="country" ng-model="country" required placeholder="Country"/>
Pin:<input type="text" class="form-control input-sm" ng-pattern="numOnlyRegex" 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>
<input type="Submit" class="form-control btn btn-success" value="Submit" />
<!--ng-disabled="myForm.$invalid"-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<input type='submit' ng-disabled="!myForm.$valid">
Removing novalidate and ng-disabled on form and already having required option of html fixed my problem
$scope.cityArray= ["hyderabad","secunderabad","delhi","mumbai"];
<select ng-model = "city" ng-options="city for city in cityArray" name='city'>
</select>
I have regular expression for each input field and I want to have all of them at one place - may be in one controller. I have tried it like this and I am not sure this is the right way of doing it
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${pageContext.request.contextPath}/js/Registratonvalidation.js"></script>
<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>
angular.module('myApp', []).controller("numOnlyRegex", function ($scope)
{
$scope.numOnlyRegex = /^\d{1,6}$/;
$scope.firstNameAndLastName = /^[a-zA-Z]{3,20}$/;
$scope.password= /^[a-zA-Z]{3,5}$/;
$scope.mobile= /^[7-9][0-9]{1,9}$/;
$scope.email= /\S+#\S+\.\S+/;
});
</script>
<!--<script src="${pageContext.request.contextPath}/numOnlyRegex.js"></script>-->
<title>Registration Form</title>
</head>
<body>
<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>
<!--onSubmit="return validate()"-->
<div ng-app="myApp" ng-controller="numOnlyRegex">
<form name="myForm" action="RegistrationServlet.do" method="POST" novalidate >
First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname | lowercase" 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><br/>
Last name:<input type="text" class="form-control input-sm" name="lname" ng-model="lname" name="lname | lowercase" ng-pattern="/^[a-zA-Z]{3,20}/" required placeholder="Last Name"/>
<span style="color:red" ng-show="myForm.lname.$error.pattern">First name cannot be less than 3 letters with no digits</span><br/>
<p>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/>
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"/><br/>
<span style="color:red" ng-show="myForm.pwd2.$error.minlength">password cannot be less than 3 letters</span><br/>
Gender: <input type="radio" name="female" />Female <input type="radio" name="male" />Male <br/><br/>
Mobile:<input type="text" class="form-control input-sm" name="mobile" ng-pattern="/^[7-9][0-9]{1,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/>
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/>
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><br/>
Street:<input type="text" class="form-control input-sm" name="street" ng-model="street" required placeholder="Street"/>
Area:<input type="text" class="form-control input-sm" name="area" ng-model="area" required placeholder="Area"/>
City: <select name="city" class="form-control" ng-model="city" required>
<option value="hyderabad">Hyderabad</option>
<option value="secunderabad">Secunderabad</option>
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
</select><br/>
State: <input type="text" class="form-control input-sm" name="state" ng-model="state" required placeholder="State"/>
Country: <input type="text" class="form-control input-sm" name="country" ng-model="country" required placeholder="Country"/>
Pin:<input type="text" class="form-control input-sm" ng-pattern="numOnlyRegex" 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>
<input type="Submit" class="form-control btn btn-success" ng-disabled="myForm.$invalid" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can define constants
angular.module('test').constant('regEx', {
numOnlyRegex: '/^\d{1,6}$/',
firstNameAndLastName: '/^[a-zA-Z]{3,20}$/',
password: '/^[a-zA-Z]{3,5}$/',
mobile: '/^[7-9][0-9]{1,9}$/',
email: '/\S+#\S+\.\S+/'
})
This constants can be injected into controllers/services/directives
.controller('TestCtrl', ['$scope','regEx', function ($scope,regEx) {
$scope.numOnlyRegex = regEx.numOnlyRegex;
}])
EDIT
With constants you can create static variables that can be used in other controllers/services/directives.
In your example you can put all of your regular Expression in one constant object and use this in your whole application.
And then you can use it like this
ng-pattern expects a regex expression.
From Angular's documentation about ng-pattern:
Sets pattern validation error key if the value does not match the
RegExp pattern expression. Expected value is /regexp/ for inline
patterns or regexp for patterns defined as scope expressions.
In other words, you could create a RegExp in the controller:
$scope.numOnly= new RegExp(regEx.numOnlyRegex);
and use it:
<input ng-model="foo" ng-pattern="numOnly">