I have a form with remote field validation using parsley.js:
<input type='text' name='username' id='username' required="true" data-parsley-trigger="focusout" data-parsley-remote="/ajax.php?UsernameExists" data-parsley-debounce="250"/>
Which works great, the field turns red when the username already exists, and green when the username is available.
Unfortunately upon clicking submit, I execute the following which always returns true, regardless of the username already exists or not:
form.parsley().isValid()
Instead of isValid I did use whenValidate() which returns a jQuery promise.
form.parsley().whenValidate().done(function(){
console.log('successfully validated');
});
required is treated differently than all other requirements. Check the doc for the {force: true} option.
Related
In my Angular 1.x app I have a password field set as follows:
<input class="form-control mb15 ng-not-empty ng-dirty ng-valid-parse ng-valid-required ng-valid ng-valid-pattern ng-touched" type="password" name="password" placeholder="Password" ng-model="user.password" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z]).{8,}$/" required="required" data-validity-message="This field cannot be left empty" oninvalid="this.setCustomValidity(''); if (!this.value) this.setCustomValidity(this.dataset.validityMessage)" oninput="this.setCustomValidity('')" id="password">
My password confirm field is similar with a check that the two passwords match:
ng-class="{'has-error':userRegister.password_confirm.$dirty && user.password_confirm !== user.password}">
This works but the password and pasword_confirm are only evaluated once the ng-pattern regex is satisfied. So if I enter two short passwords which are invalid, the validation message incorrectly tells the user that the password do not match.
If I debug the value of user.password in my template it only shows a value once it is "valid".
I thought I might be able to solved this by also adding the ng-pattern directive to the password_confirm field but it seems this is not a proper solution.
How can I evaluate the two fields as being equal before the regex is satisfied?
https://docs.angularjs.org/api/ng/directive/ngModelOptions
The default behaviour in ngModel is that the model value is set to
undefined when the validation determines that the value is invalid. By
setting the allowInvalid property to true, the model will still be
updated even if the value is invalid.
Or you can just add something like this to your condition:
'has-error':... && (user.password_confirm && user.password && user.password_confirm !== user.password)
P.S. your code is a bit akward...
I opted for this solution, probably not the most elegant but it meets my use case:
userRegister.password_confirm.$dirty && userRegister.password_confirm.$viewValue !== userRegister.password.$viewValue
By using $viewValue I can compare the actual imput values of the two fields. If I use the ng-model values the user.password value but pass the regex validation before any value is passed to the ng-model. I want to provide feedback regarding the password/password_confirm without considering if the password is in itself valid.
So:
'password' is invalid
'password_confirm' does not match password and is also invalid
display message that they do not match.
I am very much new in angular js.I want to validate and post the form data using angular js on submit.I searched google but most of them was
disable the button on load ,after completing the form with valid data the button enable but I want to show error messages on form submit.
Here is My form snapshoot
I have tested with two text fields one is name and other is email but I want to proper messages for each fields e.g for email,phone no (valid format) and empty fields now I get only empty field message.
<span class="error-message"
ng-show="showMessage(frmReg.name)">
Please complete this field.</span>
var app=angular.module('regForm',[]);
app.controller('FormController',function($scope,$http){
$scope.frmRegField={};
$scope.frmSubmit=function(){
angular.forEach($scope.frmReg.$error.required, function(field) {
field.$setDirty();
});
// $http({
// method:"POST",
// url:"form_submit.php",
// data:$scope.frmRegField
// }).success(function(data){
// });
};
$scope.showMessage=function(input){
console.log(input.$$attr.name);
var show = input.$invalid && (input.$dirty || input.$touched);
return show;
};
});
You could use either class or state to do what you need
Input fields have the following states:
$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid
They are all properties of the input field, and are either true or false.
Forms have the following states:
$pristine No fields have been modified yet
$dirty One or more have been modified
$invalid The form content is not valid
$valid The form content is valid
$submitted The form is submitted
The following classes are added to, or removed from, input fields:
ng-untouched The field has not been touched yet
ng-touched The field has been touched
ng-pristine The field has not been modified yet
ng-dirty The field has been modified
ng-valid The field content is valid
ng-invalid The field content is not valid
ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
ng-invalid-key Example: ng-invalid-required
The following classes are added to, or removed from, forms:
ng-pristine No fields has not been modified yet
ng-dirty One or more fields has been modified
ng-valid The form content is valid
ng-invalid The form content is not valid
ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
ng-invalid-key Example: ng-invalid-required
The classes are removed if the value they represent is false.
Give the form a name:
<form name="myForm">
And a name for the input to:
<input type="text" name="myName">
Then use ng-show/ng-if in your span:
<span class="error-message" ng-show="myForm.myName.$touched && myForm.myName.$invalid">
Please complete this field.
</span>
You can use ng-disabled to validate submit too:
<input type="submit" value="Submit" ng-disabled="myForm.$invalid">
Hope this helps. Good luck!
I have a form text field it is required but its initial value is an empty string, so when I load the form the controller validates the form field and marks it as error, I want on the initial load not to validate the form field only after an onblur event.
<input data-ng-model="MyCtrl.opportunity.company" type="text" class="form-control" name="company" ng-model-options="{ updateOn: 'blur' }" required />
And here is the fiddle http://jsfiddle.net/petran/Lvc0u55v/725/
I know I can call $setValidity on controller I am looking for a more elegant solution if there is exist.
Add this statement to ng-class statement:
...&& addOpportunityForm.company.$dirty...
Use the $pristine for validation tool in AngularJS. This will allow the funtion to wait until the input field has been changed before testing the condition. You can learn more about form states here: Angular Form States
<input type="checkbox" id="acknowledge" name="acknowledge"
ng-model="formData.acknowledge"
ng-true-value="true"
ng-required="formData.acknowledge !='true'"/>
<div ng-show="(peopleworksForm.acknowledge.$dirty || peopleworksForm.submited) && formData.acknowledge !='true'">
Please acknowledge that the information is correct</div>
I feel that something is wrong here with ng-required. Without required or ng- required it works fine. It returns the error message if I don't check the checkbox. But there also a problem: although I check the checkbox, form.$valid = false. That's why I tried using required or ng-required. You may asked me to remove the ng-true-value and use required. I know that also working. But the problem is I load formData.acknowledge = "true" inside my controller, so when the page loads the checkbox has to be checked. So I had to use ng-true-value. Can any one help me?
To restate, you want to show a message when the checkbox acknowledge is not checked by checking the $valid state of the form or the checkbox.
Also, the checkbox should be checked from the controller when assigned "true" - string value, rather than true - boolean value.
You are correct that you need to use ng-true-value to redefine the value given to the model for a checked state. You are using ng-true-value incorrectly, however, because you are not assigning the string value, but rather the boolean.
The correct way is below (notice the double-quotes "' '"):
<input type="checkbox" name="foo"
ng-model="foo" ng-true-value="'true'" required>
In the controller you could assign to "true":
$scope.foo = "true";
plunker
Also, you don't need to use ng-required with an expression - this would make the control required on a conditional basis, and I think you want it to be always "required".
General Pattern
You should be getting any data bindings you need from your controller. If necessary, those pieces of data should come from a service you inject or depend on. It sounds like you're roughly following that.
ng-true-value
You should only need to use ng-true-value if you want something other than true or false, as that is the default behavior.
what's probably wrong
In your controller, you should probably just be defaulting your property to true if that's what you need.
informationAcknowledgeOnlineRegistrationChange = true; // replace value you get from your service
should do everything you need.
As you have answer yourself, you can remove the ng-true-value and use the required:
<input type="checkbox" id="acknowledge" name="acknowledge"
ng-model="formData.acknowledge"
required />
<div ng-show="(peopleworksForm.acknowledge.$dirty || peopleworksForm.submited) && formData.acknowledge">
Please acknowledge that the information is correct</div>
In the controller, the data binding would be:
formData.acknowledge = true; //not 'true' as string
when you don't check the check box no value is provided which goes against ng-required . here what you can do is to set a default value for for the check box when user doesn't provide any value for the checkbox
I am using angularjs to do client side validation on a textbox where I need input as alphanumeric chars only. If the textbox is left empty or non-alphanumeric char is entered, the submitform sends 'false' to JS which is desired but the problem is it doesn't pass the non-alphnumeric char itself (in the scope).
JSP file:
<form name="addressForm" method="post"
ng-submit="submitform(addressForm.$valid)" novalidate>
..
<input ng-model="address" type="text"
**ng-pattern**="/^[a-zA-Z0-9 ]*$/" required="true"/>
JS file:
$scope.submitform= function(isValid){
var inputAddr = $scope.address;
alert(inputAddr); //coming as undefined
...
Now when I input an alphanumeric character in input box 'address' in jsp it gives me undefined on alerting it in JS (probably because of pattern which filters the char being non-alphanumeric). If I remove ng-pattern, it passes the submitForm passes 'true' as if every input is "as expected". The reason I want to access $scope.address is to check and value and display different error message for "empty" and a "non-alphanumeric" validation.
Any help is appreciated !
When the model is not valid, the value is not assigned to the model. If you want to see what the user has typed, you need to check $viewValue:
You must to add name attribute to input, so change your input html to:
<input ng-model="address" type="text" name="address"
ng-pattern="/^[a-zA-Z0-9 ]*$/" required="true"/>
And change your submit function to
$scope.submitform = function(isValid) {
console.log($scope.addressForm.address.$viewValue);
}
It sounds like you just need to know what the validation error is.
You can check the $error property the FormController (addressForm in your case) to see what validations passed or failed.
For example, if the input is empty, then the "required" validation will have failed and addressForm.$error.required will be an Array containing the inputs that failed this validation.
If the "required" validation succeeded, then addressForm.$error.required will just be false.
You can use this in angular expressions quite easily:
<p ng-show="addressForm.$error.required">This field is required.</p>
Or you can access the form through the $scope object that is associated with the view:
if ($scope.addressForm.$error.required) {
// required validation failed
}
Check out the documentation for FormController and ngModelController.