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>
Related
Codepen link: http://codepen.io/anon/pen/mVyPaw
Need to create an angular app (w/ 1 controller) that validates that this form has all three fields filled out & Submit button can only be enabled if the form is valid. Don't need to use the preprocessors.
<div class="container" ng-app="myApp" ng-controller="formCtrl">
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="form" id="contact-form">
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName">
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName">
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }">
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-model="submitButton">Submit</button>
</form>
</div>
Actually it's module inject problem. ng-app="myApp" ng-controller="formCtrl" Where is your myApp module code.
try like this.
<div class="container" ng-app>
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="form" id="contact-form" novalidate>
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName" required>
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName" required>
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-disabled="form.$invalid">Submit</button>
</form>
</div>
Add required validation
<div class="container" ng-app="myApp" ng-controller="formCtrl">
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="myForm" id="contact-form">
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName" required>
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName" required >
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-model="submitButton" data-ng-disabled="myForm.$invalid" >Submit</button>
</form>
</div>
Here is your edited CodePen
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/>
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 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">