I want to implement dirty check on all required elements in a form
i have tried like this
<div ng-app="">
<form name="myForm" ng-controller="Ctrl">
<label>
userType:
</label>
<input name="usertype" ng-model="userType" required>
<span class="error" ng-show="myForm.userType.$dirty">Required</span><br>
<label>
designation:
</label>
<input name="designation" ng-model="Designation" required>
<span class="error" ng-show="myForm.Designation.$dirty">Required</span><br>
</form>
</div>
Related
">
<ion-content>
<h3 class="style3"><strong>Message</strong></h3>
<form name="form1">
<div class="list">
<label class="item item-input" >
<input type="text" placeholder="Enter Number"ng-blur='SendInvit()' ng-model="message.name" name="phone" ng-required="true" />
<span class="error-message" ng-show="form1.phone.$dirty&&form1.phone.$invalid"> </span>
</label>
<input type="text" rows="4" cols="" placeholder="Write Your Message"
class="area" name="phone" ng-model="message.description" ng-maxlength=
"{{maxLength}}" ng-change="updateBody();" ng-required="true">
<span class="error-message" ng-show="form1.phone.$dirty &&form1.phone.$invalid"></span>
<div id="characters">
<span>Characters left: {{maxLength - message.description.length}}</span>
Send
Cancel
Below is the plunker of my work.Please help me with the code
http://plnkr.co/edit/NDGeMcqzpbIqwd8sr5jM
Used ng-disabled when the form is invalid with ng-maxlength. Set the maxlength from your controller.
Max-length:
ng-maxlength="maxlength"
Ng-disabled
ng-disabled="form1.phone.$invalid"
Here is a working example.
https://plnkr.co/edit/FC4vXw1311pnMee8d2Lz?p=preview
if you want simple solution use maxlength="10"!
Good luck.
I have a form with a set of fields. My problem is, submit button is disabled initially but the moment any one of the field goes valid or non-empty button is getting enabled. Here is my source code:
<form class="aui newDiscoveryForm" name="newDiscoveryForm" ng-submit="createNewDiscovery(user)" novalidate>
<fieldset class="group">
<div class="field-group">
<label class="label">Product Name</label>
<input class="text" type="text" name="input1" ng-model="user.productName" value="" id="productName" required/>
<p ng-show="newDiscoveryForm.input1.$invalid && !newDiscoveryForm.input1.$pristine" style="color: #880000">Product name is required.</p>
<div class="error"></div>
<span class="result_product" style="color: #880000"></span>
</div>
<div class="field-group">
<input class="text" type="text" name="input2" ng-model="user.endUsers" value="" required/>
<p ng-show="newDiscoveryForm.input2.$invalid && !newDiscoveryForm.input2.$pristine" style="color: #880000">EndUsers required.</p>
<label class="label">Who are end users</label>
<div class="description">[Gamers, Engineers, Commuters, Media, Goverment]</div>
</div>
<div class="field-group">
<label for="licenseKey">What Problem Are They Facing Today</label>
<textarea class="textarea" rows="4" cols="10" name="input3" ng-model="user.problemsArea" id="problemsarea" value="" required></textarea>
<p ng-show="newDiscoveryForm.input3.$invalid && !newDiscoveryForm.input3.$pristine" >ProblemsArea required.</p>
<div class="description">Spend So much in .....</div>
</div>
<div class="field-group">
<label class="label">What kind of product is this</label>
<input class="text" type="text" name="input4" ng-model="user.productKind" id="productkind" value="" required/>
<p ng-show="newDiscoveryForm.input4.$invalid && !newDiscoveryForm.input4.$pristine" >ProductKind required.</p>
<div class="description">[Software, MobileApp, JIRA-Plugin]</div>
</div>
<div class="field-group">
<label for="d-lname">How do you plan to solve the problem</label>
<input class="text long-field" type="text" id="problemSoln" name="input5" ng-model="user.problemSoln" value="" required />
<p ng-show="newDiscoveryForm.input5.$invalid && !newDiscoveryForm.input5.$pristine" >ProblemSolution required.</p>
<div class="error"></div>
<div class="description">[Load Balancing of Personal, Automated Traffic Info]</div>
</div>
<div class="field-group">
<label for="d-lname">Who are your competitors</label>
<input class="text long-field" type="text" id="competitors" name="input6" ng-model="user.competitors" value="" required/>
<p ng-show="newDiscoveryForm.input6.$invalid && !newDiscoveryForm.input6.$pristine" >Competitors required.</p>
<div class="error"></div>
<div class="description">Traditional Commuting Solution</div>
</div>
<div class="field-group">
<label for="d-lname">How do you differntiate from your competitors</label>
<input class="text long-field" type="text" id="differentiator" name="input7" ng-model="user.differentiator" value="" required/>
<p ng-show="newDiscoveryForm.input7.$invalid && !newDiscoveryForm.input7.$pristine" >Differentiator required.</p>
<div class="error"></div>
<div class="description">[Automated, Secure]</div>
</div>
</fieldset>
<div class="buttons-container">
<div class="buttons">
<button class="aui-button aui-button-primary ap-dialog-submit" value="Submit" type="submit"
id="save-button" ng-click = "createNewDiscovery(user)" ng-disabled="newDiscoveryForm.$invalid">Save</button>
<button id="close-button" type="button" class="aui-button aui-button-link ap-dialog-cancel" ng-click = "cancelClick()">Cancel</button>
</div>
</div>
</form>
How can I make sure that submit button is disabled untill all the fields are filled.
I tried almost all the available solutions like make all the fields required, make the submit button as ./. But nothing seems to be working.
You are almost doing it right. To use angular's form validation, you have to use the angular directives for that. For example, use the ng-required instead of the normal required (though it will work, but you should use ng-required for best practices):
<form name="newDiscoveryForm">
<input type="text" name="someName"
ng-model="someModel"
ng-required="true" /> <!-- use ng-required -->
<!-- other inputs -->
<!-- $invalid will evaluate to true if the `ng-required` are not valid -->
<button type="submit"
ng-disabled="newDiscoveryForm.$invalid">
Submit!
</button>
</form>
See this JSFIDDLE
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
Is it possible to make use of the angularJS validation tools without wrapping the controls in a form, and what would this be called?
Normal angularjs form validation example:
<form name="form" class="form-validation">
<p class="text-muted">Please fill the information to continue</p>
<div class="form-group">
<label>Username <em class="text-muted">(allow 'a-zA-Z0-9', 4-10 length)</em></label>
<input type="text" class="form-control" ng-model="user.name" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" required >
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" ng-model="user.email" required >
</div>
<button type="submit" class="btn btn-success" ng-disabled="form.$invalid">Submit</button>
</form>
I am trying to follow the AngularJS example of doing inline validations of required fields. However when it comes to using a ng-repeat, it doesn't seem to work for me.
<form name="myForm" novalidate>
Me: <input required type="text" name="myName" ng-model="name" />
<span class="error" ng-show="myForm.myName.$error.required">Required!</span>
<div ng-repeat="friend in friends">
Friends: <input required type="text" name="myFriend[{{$index}}]" ng-model="friend.name" />
<span class="error" ng-show="myForm.myFriend[{{$index}}].$error.required">Required</span>
</div>
</form>
JSFiddle
Any idea what I am doing wrong or what I can do to fix it?
Unfortunately you cannot do it that way. The input element does not like having the name dynamically generated. You will need to use ng-form as a subform and wrap the repeated element. Here is a fork of your fiddle: http://jsfiddle.net/p26VQ/
<div ng-controller="MyCtrl">
<form name="myForm" novalidate>
Me: <input required type="text" name="myName" ng-model="name" /><span class="error" ng-show="myForm.myName.$error.required">
Required!</span>
<div ng-repeat="friend in friends">
<ng-form name="subform{{$index}}">
Friends: <input required type="text" name="myFriend" ng-model="friend.name" />
<span class="error" ng-show="subform{{$index}}.myFriend.$error.required">Required</span>
</ng-form>
</div>
</form>
</div>
Using at least AngularJS 1.4.3 you can use this:
name="formControl_{{uniqueId}}"
And this:
ng-messages="myForm[ 'formControl_' + uniqueId ].$error"
Taken from the comment at https://github.com/angular/angular.js/issues/1404#issuecomment-125805732 found in the issue referenced by Danny.