I am currently using Parsley.js 2.2.0. I had group validation working when there was one group, but I added another group, but it still tries to validate the old group.
eventinfo group example.
<input maxlength="45" value="" type="text" name="address" id="Address" class="form-control floatlabel" placeholder="Address" tabindex="75" title="Address" data-parsley-required data-parsley-group="eventinfo">
call to validate eventinfo group
if (elEventForm.parsley().validate('eventinfo') === false) { return }
quoteinfo group example.
<input data-parsley-required data-parsley-group="quoteinfo" maxlength="75" value="" type="email" name="email" id="Email" class="form-control floatlabel" placeholder="Email" tabindex="45" title="Email">
call to validate quoteinfo group
if (elEventForm.parsley().validate('quoteinfo') === false) {
return
}
There have been 20 releases since 2.2.0.
Current API is ...validate({group: 'eventinfo'})
Related
Here is my Code and so have many fields like this :
<input type="text" pInputText class="form-control" name="companyName" [(ngModel)]="company.Name" required #companyName="ngModel"
/>
<label>Company Name</label>
<p class="ui-message ui-messages-error ui-corner-all" *ngIf="(!companyName.valid && companyName.touched)">
Company Name is required
</p>
Instead of defining separate message for all mandatory/invalid fields, can't I use single message with place holder for field name? So whenever I want to change message, I can manage this with single line change.
e.g. "${field} is required, ${field} is not valid etc."
please give me a example if this can do
The first solution that crossed my mind was just wrap the error messages in a function:
var displayError = (field) => `${filed} is required`;
And on the HTML
<input type="text" pInputText class="form-control" name="companyName" [(ngModel)]="company.Name" required #companyName="ngModel"/>
<label>Company Name</label>
<p class="ui-message ui-messages-error ui-corner-all" *ngIf="(!companyName.valid && companyName.touched)">
{{ displayError('Company name') }}
</p>
I have multiple input fields under different headings:-
<label>User</label>
<input type="text" ng-model="a.arr.username"/>
<input type="text" ng-model="a.arr.userdob"/>
<input type="text" ng-model="a.arr.userpanNo"/>
<label>Employee</label>
<input type="text" ng-model="a.arr.empname"/>
<input type="text" ng-model="a.arr.empdob"/>
<input type="text" ng-model="a.arr.emppanNo"/>
<label>Daily Workers</label>
<input type="text" ng-model="a.arr.dwname"/>
<input type="text" ng-model="a.arr.dwdob"/>
<input type="text" ng-model="a.arr.dwpanNo"/>
I want to save above data in the format:- [{a.arr.username:any value,a.arr.userdob:any value,a.arr.userpanNo:any value},{a.arr.empname:any value,a.arr.empdob:any value,a.arr.emppanNo:any value},{a.arr.dwname:any value,a.arr.dwdob:any value,a.arr.dwpanNo:any value}].
In my directive:-
scope.a.array=[];
var properties = Object.keys(scope.a.arr);
for(var i=0;i<properties.length;i++){
scope.a.array.push({});
scope.a.array[scope.a.array.length - 1][properties[i]] = scope.a.arr[properties[i]];
};
But above code is creating data like this:- [{a.arr.username:any value},{a.arr.userdob:any value},{a.arr.userpanNo:any value},{a.arr.empname:any value},{a.arr.empdob:any value},{a.arr.emppanNo:any value},{a.arr.dwname:any value},{a.arr.dwdob:any value},{a.arr.dwpanNo:any value}]
It is pushing different properties in array instead of combining them. What is the correct way of doing this?
I am trying to do some math with user inputs.
I have this basic objets to start with
$scope.shape =
{id: 1, cx: 0, cy: 0, result: 0}
;
And the user can type the value of cx and cy into fields;
<input ng-model="shape.cx" type="text" class="form-control" id="cx">
<input ng-model="shape.cy" type="text" class="form-control" id="cy">
I want to multiply the 2 values cx and cy and show the result in another input.
<input type="text" class="form-control" id="A" ng-model="shape.cx * shape.cy">
This is working, I can see the the result in the field but I get an error;
Error: [ngModel:nonassign]
I would also like to asign this result to shape.result.
How can I set the value of shape.result to be shape.cx*shape.cy
See here it could be done like this :
SCENARIO 1 : Result on Button Click : (Procedural Approach)
<input ng-model="shape.cx" type="text" class="form-control" id="cx">
<input ng-model="shape.cy" type="text" class="form-control" id="cy">
<input type="button" class="form-control" ng-click="calculate()">
<input type="text" class="form-control" id="A" ng-model="shape.result">
$scope.calculate = function(){
$scope.shape.result = parseInt($scope.shape.cx) * parseInt($scope.shape.cy);
}
SCENARIO 2 : As soon as Value Changes in text boxes : (Direct Approach)
<input ng-model="shape.cx" type="text" class="form-control" id="cx">
<input ng-model="shape.cy" type="text" class="form-control" id="cy">
<input type="text" class="form-control" id="A" ng-model="parseInt(shape.cx) * parseInt(shape.cy)">
SCENARIO 3 : Using $watch : (Procedural Approach)
<input ng-model="shape.cx" type="text" class="form-control" id="cx">
<input ng-model="shape.cy" type="text" class="form-control" id="cy">
<input type="text" class="form-control" id="A" ng-model="shape.result">
$scope.$watch(function (){
$scope.shape.result = parseInt($scope.shape.cx) * parseInt($scope.shape.cy);
});
Note :
Scenario 3 is using $watch hence it should be not used untill and unless you're in real need of it.
Scenario 1 is best suited to you I think as it will make your concept.
Scenario 2 is a direct approach hence should be used after gaining some knowledge as well as experience(But it's short & best within 3 scenatios). It's a reference from #tapos answer
Thanks & Cheers
Well you need to watch for cy and cx changes and do the calculation when it change.
$scope.$watch('shape.cx', function() {
$scope.shape.result = $scope.shape.cx * $scope.shape.cy;
});
Example fiddle: http://jsfiddle.net/ccmf07k2/
Every language input field is string when a user enter any number in text box it is string
<input ng-model="shape.cx" type="text" class="form-control" id="cx">
<input ng-model="shape.cy" type="text" class="form-control" id="cy">
so you need some work in your result box ix
<input type="text" class="form-control" id="A" ng-model="parseInt(shape.cx) * parseInt(shape.cy)">
then you get your appropriate result
I'm using the autofill-event polyfill for a form in Angular. For some of the fields, I've used ng-model-options within the input field. For those fields in Chrome, the model doesn't update, and fields fail validation when they should succeed. If I don't use ng-model-options everything works fine. Any thoughts on how to fix this in a way that allows me to still use ng-model-options?
Here's the code for the validation that gives a false negative:
<label class="control-label" for="city">City</label>
<input type="text" id="city" name="city" ng-model="contactForm.contact.city"
placeholder="City" class="form-control" ng-minlength="2"
ng-model-options="{ updateOn: 'blur' }" required>
<span ng-show="paymentForm.city.$error.required && !paymentForm.city.$untouched
|| paymentForm.city.$error.required
|| paymentForm.address.$error.minlength && !paymentForm.address.$untouched
|| paymentForm.address.$error.minlength" class="help-block">Enter your city</span>
I must validate a field when I leave another field...
I let you see my code:
<input data-ng-model="invitation.Email" name="email" type="email" data-ng-required="true"
data-ng-model-options="{ updateOn: 'mousedown blur' }" />
<input data-ng-model="invitation.EmailConfirmation" name="email_confirmation" type="email"
data-ng-required="true" data-match="invitation.Email" data-ng-model-options="{ updateOn: 'mousedown blur' }" />
<span data-ng-show="presenta_amico_form.email_confirmation.$error.mismatch" class="error">Email mismatch</span>
So, for example... I write my Email, and that's Ok... then I write my ConfirmationEmail but the error "Email mismatch" appear because I see that I was wrong in typing the Email field. So I correct the Email field but the error does not disappear because I have to focus and blur the EmailConfirmation field.
I do not like this and I would like that the ConfirmationEmail is validated also when the Email field lose focus.
How can I do?
Thank you
You could add an ngBlur handler to the second field and manually apply the validation e.g.
<input data-ng-model="invitation.Email" name="email" type="email" data-ng-required="true"
data-ng-model-options="{ updateOn: 'mousedown blur' }" ng-blur="checkMatch()" />