I'm trying to make a range validation between 2 numeric inputs. The inputs represent base remuneration and top remuneration. I tried to use ui-validate-watch like this: http://jsfiddle.net/GNJP4/3/. The problem is that basically lowerBound is not updated correctly (same with upperBound)
If you have an idea to make a work around or use directives (I tried but is a mess) would be much appreciated.
here i have two input field like password and confirmPassword. Now we want to do some validate like password match in both fields or not. here is the html and js code snipet.
var validationApp = angular.module('validationApp',['ngGrid','ui.utils']);
// you have to be put this line of code in your controller
$scope.formData = {
password: "",
cPassword: ""
};
<!-- password -->
<div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="formData.password" ng-minlength="5" ng-maxlength="12" required>
<p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">Required and must be of length 7 to 12.</p>
</div>
<!-- confirm password -->
<div class="form-group" ng-class="{ 'has-error' : userForm.cPassword.$invalid && !userForm.cPassword.$pristine }">
<label>Confirm Password</label>
<input type="password" name="cPassword" class="form-control" ng-model="formData.cPassword" ui-validate=" '$value==formData.password'" ui-validate-watch=" 'formData.password'" ng-minlength="5" ng-maxlength="12" required>
<p ng-show="userForm.cPassword.$invalid && !userForm.cPassword.$pristine" class="help-block">Required. Password not match</p>
</div>
Related
This question already has answers here:
Resetting form after submit in Angularjs
(5 answers)
Closed 4 years ago.
When i am click add button for add records in next time then last form data is present in form it is not clear in bootstrap form model.
$scope.saveAdd = function () {
$http({
method: 'post',
url: 'user/insert',
data: $scope.form,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data)
{
if (data == 1) {
$scope.user_succ = $scope.user_succ ? false : true;
$scope.succ = "User added successfully";
$timeout(function () {
$(".modal").modal("hide");
}, 3000);
} else if(data == 3) {
$scope.confirm_password=$scope.confirm_password ? false :true;
$scope.confirm_password_error="Confirm Password is Not Matched";
}else{
$scope.user_err = $scope.user_err ? false : true;
$scope.err = "User insertion failed! Try again.";
}
});
};
My View page:-
This is my view page that is load from angularjs routes.js.If you found any error error please give me some feedback.or any others angularjs validation you have please share with me.
<form method="POST" name="addItem" role="form" ng-submit="saveAdd()">
<div class="modal-body">
<div class="form-group">
<label for="name" class="col-form-label">Name<span class="text-danger">*</span></label>
<input type="text" class="form-control" ng-model="form.name" id="name" name="name" placeholder="Enter Name" required>
<span style="color:red" ng-show="addItem.name.$touched && addItem.name.$invalid">Please Enter User Name.</span>
</div>
<div class="form-group">
<label for="phone" class="col-form-label">Phone Number<span class="text-danger">*</span></label>
<input type="text" class="form-control" ng-model="form.phone" id="phone" name="phone" placeholder="Enter Phone Number" required="">
<span style="color:red" ng-show="addItem.phone.$touched && addItem.phone.$invalid">Please Enter Phone Number.</span>
</div>
<div class="form-group">
<label for="usertype" class="col-form-label">User Type<span class="text-danger">*</span></label>
<select class="form-control" ng-model="form.type" id="type" name="type" required="">
<option value="">Select a user type</option>
<option value="branch">Branch Admin</option>
<option value="manager">Branch Manager</option>
</select>
<span style="color:red" ng-show="addItem.type.$touched && addItem.type.$invalid">Select User Type.</span>
</div>
<div class="form-group">
<label for="address" class="col-form-label">Address</label>
<textarea class="form-control" ng-model="form.address" id="address" name="address" placeholder="Enter Address" required=""></textarea>
<span style="color:red" ng-show="addItem.address.$touched && addItem.address.$invalid">Please Enter Address.</span>
</div>
<div class="form-group">
<label for="username" class="col-form-label">Username<span class="text-danger">*</span></label>
<input type="text" class="form-control" ng-model="form.username" id="username" name="username" placeholder="Enter Username" required="">
<span style="color:red" ng-show="addItem.username.$touched && addItem.username.$invalid">Please Enter Username.</span>
</div>
<div class="form-group">
<label for="password" class="col-form-label">Password<span class="text-danger">*</span></label>
<input type="password" class="form-control" ng-model="form.password" placeholder="Password" name="password" required="required" ng-minlength="6"/>
<div ng-if="addItem.password.$touched || signupSubmitted">
<p style="color:red" ng-show="addItem.password.$error.required" class="help-block">Password is required</p>
<p style="color:red" ng-show="addItem.password.$error.minlength" class="help-block">Minimum 6 character</p>
</div>
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Confirm Password<span class="text-danger">*</span></label>
<input type="password" class="form-control" name="confirm_password" ng-model="form.confirm_password" placeholder="Confirm password" match-password="password" required>
<div ng-if="addItem.confirm_password.$touched || signupSubmitted">
<p style="color:red" ng-show="addItem.confirm_password.$error.required" class="help-block">Confirm password is required</p>
<p style="color:red" ng-show="confirm_password" >{{confirm_password_error}}</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" >Submit</button>
</div>
</form>`
You can try reset function which reset your form fields. But this is not the accurate solution. Please provide your Complete controller and HTML code to make an accurate solution.
$scope.resetForm = function(){
/* reset the data to a new object so that all the properties
* of form are reset
*/
$scope.data = {};
};
UPDATE
Based on the partial HTML code, you can try form controller API setPristine: $scope.FORMNAME.$setPristine();
Replace FORMNAME with your form name. Also make note that as your form is binding a model object to your inputs so, you need to take care of clearing those input model as well:
$scope.formData = {};
Hope this will help to solve your point :)
The reason is that your previous value that you bind with model is still there. So, you can do either of 2 things:
Inject $route in controller and do $route.reload() on ng-submit and the route is reloaded.
Reinitialize the model by creating and calling a function which clears the data.Use $scope.formName.$setPristine() if you have validation depending on this pristine state of form
NOTE: $route.reload() will reload your route, so all the changes which have in your controller will be reverted. So choose accordingly.
Its Work.With Minor Change.
$scope.form = {}; // clears input fields
$scope.NameofFormSubmitted.$setPristine();
$scope.NameofFormSubmitted.$setUntouched();
I think what you are looking for is:
$scope.form = {}; // clears input fields
$scope.NameofFormSubmitted.$setPristine();
$scope.NameofFormSubmitted.$setUntouched(); // resets touch events
I am trying to show error message after validation. Backend is php and it is returning the data i can see that in network tab.
Here are the codes.
function formRegister($scope, $http) {
// create a blank object to hold our form information
// $scope will allow this to pass between controller and view
$scope.formData = {};
$scope.registerForm = function() {
$http({
method : 'POST',
url : 'registerexec.php',
data : $.param($scope.formData), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
console.log(data);
if (!data.success) {
// if not successful, bind errors to error variables
//{{$scope.errorFname}}
$scope.erroracType = data.errors.actype;
$scope.errorFname = data.errors.Fname;
$scope.errorLname = data.errors.Lname;
$scope.errorEmail1 = data.errors.email1;
$scope.errorPassword1 = data.errors.password1;
$scope.errormobile = data.errors.mobile;
$scope.message1 = data.message1;
}
});
};
}
Here is the form.
<div class="feature-box wow animated flipInX animated">
<div id="validation-errorss" ng-show="message1" ><div class="alert alert-danger"><strong >{{ message1 }}</strong><div></div></div>
</div>
<div class="panel-body" id="success"></div>
<font size="4" color="#fff">Register</font>
<form name="register" method="post" id="register" role="form" ng-submit="registerForm()">
<div class="form-group" ng-class="{ 'has-error' : erroractype }">
<select id="actype" name="actype" class=" selector form-control" ng-model="formData.actype" required="required">
<option value="" selected="selected" >I am</option>
<option value="1">a user</option>
<option value="2">an admin</option>
</select>
<span class="help-block" ng-show="errorName">{{ erroractype }}</span>
</div>
<div class="form-group" ng-class="{ 'has-error' : errorFname }">
<input type="text" id="fname" name="fname" placeholder="First Name" title="Please Enter Your First Name" class="form-control input-sm textbox1" required="required" ng-model="formData.Fname">
<span class="help-block" ng-show="errorFName">{{ errorFname }}</span>
</div>
<div class="form-group" ng-class="{ 'has-error' : errorLname }">
<input type="text" id="lname" name="lname" placeholder="Last Name" title="Please Enter Your Last Name" class="form-control input-sm textbox1" required="required" ng-model="formData.Lname">
<span class="help-block" ng-show="errorLName">{{ errorLname }}</span>
</div>
<div class="form-group" ng-class="{ 'has-error' : errorEmail1 }">
<input type="email" id="email1" name="email1" placeholder="Email" class="form-control input-sm textbox1" title="Please Enter Your Valid Email" required="required" ng-model="formData.Email1">
<span class="help-block" ng-show="errorEmail1">{{ errorEmail1 }}</span>
</div>
<div class="form-group" ng-class="{ 'has-error' : errorPassword1 }">
<input type="password" name="password1" id="password1" placeholder="Password" title="Please enter AlphaNumeric value" class="form-control input-sm textbox1" required="required" ng-model="formData.Password1">
<span class="help-block" ng-show="errorPassword1">{{ errorPassword1 }}</span>
</div>
<div class="form-group" ng-class="{ 'has-error' : errormobile }">
<input type="text" id="mobile" name="mobile" placeholder="Mobile Number (Without +91)" title="Please Enter Your Contact Number without Coutry Code." class="form-control input-sm textbox1" required="required" ng-model="formData.mobile">
<span class="help-block" ng-show="errormobile">{{ errormobile }}</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-home" name="btn-register" id="btn-register" required="required">Register</button>
</div>
</form>
Problem is when form get validated in backend. The array messages are not showing in .
Here are the validation errors which found in firebug.
errors:Object Fname:"Your First name must be between 3 to 30
characters!" Lname:"Your Last name must be between 3 to 30
characters!" Password1:"Your password must be between 6 to 30
characters!" success:false
Add novalidate attribute to form tag
<form novalidate>
You might use this if you plan to do your own client-side validation, if you want to create your own validation bubbles, or if you plan to go all server-side validation (which you need to do anyway).
I am working on angular form validations. Apart from rest of the validations, I also want that if we submit the form without touching any field, then all error messages should be shown in form.Here I am using below code in name field so that if we click on submit button without touching name field then error in name field should be shown with red border but it is not working-
<div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && (myForm.submitted || myForm.name.$touched ) }">
<label for="UserName" style="color:#767676" class="" ng-hide="myForm.name.$invalid && (myForm.submitted || myForm.name.$touched )">Name</label>
<label class="error_message_text" ng-show="myForm.name.$invalid && (myForm.submitted || myForm.name.$touched )">
Please enter the name
</label><br>
<input type="text" name="name" class="form-control" ng-class="" ng-model="user.name" required/>
</div>
I have created a plunker here- https://plnkr.co/edit/33EbFu7pQuZrVyiuwNGZ?p=preview
Can anyone tell me how I will achieve the validation error messages with red border on clicking submit button?
Instead of myForm.submitted use myForm.$submitted
<div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && (myForm.$submitted || myForm.name.$touched ) }">
<label for="UserName" style="color:#767676" class="" ng-hide="myForm.name.$invalid && (myForm.$submitted || myForm.name.$touched )">Name</label>
<label class="error_message_text" ng-show="myForm.name.$invalid && (myForm.$submitted || myForm.name.$touched )">
Please enter the name
</label><br>
<input type="text" name="name" class="form-control" ng-class="" ng-model="user.name" required/>
</div>
I am trying to reset the form after the submit button is clicked. I understand that setting the form to pristine alone should not clear the input fields. I tried implementing the various suggestions to clear form by setting the form to pristine and then assigning null to all input fields. Is there a more neat way to implement it ?
Template:
<p>{{contactForm.$pristine}}</p>
<div class="inBox">
<form name="contactForm" novalidate>
<div class="form-group" ng-class="{ 'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine }">
<label>Name</label>
<input type="text" ng-model="tabVm.name" class="form-control" name="name" required>
<p ng-show="contactForm.name.$invalid && !contactForm.name.$pristine" class="help-block">You name is required.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
<label>Email</label>
<input type="email" ng-model="tabVm.email" name="email" class="form-control" required>
<p ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
<div class="form-group">
<label>Contact Number</label>
<input type="tel" ng-model="tabVm.number" class="form-control">
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.message.$invalid && !contactForm.message.$pristine }">
<label>Message</label>
<textarea type="text" rows="5" ng-model="tabVm.message" name="message" class="form-control textBox" required></textarea>
<p ng-show="contactForm.message.$invalid && !contactForm.message.$pristine" class="help-block">Brief message is required.</p>
</div>
</form>
<button type="submit" ng-click="sendMsg()" class="btn large-btn"
ng-disabled="contactForm.message.$invalid || contactForm.name.$invalid||contactForm.email.$invalid " >Send</button>
</div>
app.js
$scope.contactForm.$setPristine();
and I also tried
$scope.contactForm.$pristine=true;
Neither of them seem to work. I use angular 1.4.8.
Thank you.
You should use $setPristine() and then reset the ng-model object. Also pay attention you have the submit button outside the <form>.
This is a working JSFiddle (I used only one input for example)
$scope.sendMsg = function() {
$scope.contactForm.$setPristine();
$scope.tabVm = {};
}
You referenced controlForm, but the html you posted have contactForm
I finally got it working by making the following changes :
<div class="container box col-lg-6" >
<p>{{contactForm.$pristine}}</p>
<p>name state: {{contactForm.name.$pristine}}</p>
<div class="inBox">
<form name="contactForm" ng-submit="sendMsg(contactForm)" novalidate>
<div class="form-group" ng-class="{ 'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine }">
<label>Name</label>
<input type="text" ng-model="tabVm.name" class="form-control" name="name" required>
<p ng-show="contactForm.name.$invalid && !contactForm.name.$pristine" class="help-block">You name is required.</p>
</div>
<input type="submit" class="btn large-btn"
ng-disabled="contactForm.message.$invalid || contactForm.name.$invalid||contactForm.email.$invalid " >
</form>
</div>
</div>
and app.js :
$scope.sendMsg=function(form){
if(form.$valid){
console.log("Form is valid"); //this was a check I used to confirm that the controller recognized the form.
}
form.$setPristine();
tabVm.name="";
}
}
I do not clearly understand why this works or what was I doing wrong earlier. I would appreciate if anyone could explain. Thank you.
Do as follows
$scope.sendMsg = function(){
//your function code
$scope.tabVm={};
$scope.tabVm.name='';
$scope.tabVm.email='';
$scope.tabVm.number='';
$scope.tabVm.message='';
}
Hi All of the angular developer, I am fetching a validation problem with angular js. I can do the validation under the Form, I can check every validate field by Form in angular js. but i want to do the same job by using Div instead of Form. many people suggested me that you can do by angular directives. but how? They did not clear to me.Here how will i check all validate directives under the Div?. I have not found any solution. Anyone have an idea or solution?. I have given my example below. now i want to validate this by using angular js directives. Thanks
<div name="userForm" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
<label>Name*</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>
<!-- USERNAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email">
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
<button type="button" ng-click="Save()" class="btn btn-primary">Submit</button>
</div>
Use ng-form:
<div ng-form="userForm" novalidate>
...
</div>
You may follow the instruction below
http://www.breezejs.com/documentation/validation
http://www.breezejs.com/breeze-labs/breezedirectivesvalidation