I need to validate a single selection row on a datatables. I don't know which is the best way it can be done. Right now I've put a hidden type input that is filled by javascript when the users clicks a row on datatables. When I validate form, parsley doesn't submit it if required hidden input is blank, but no error message is shown.
I've also tried to get field:error event, but it is not fired on hidden field.
window.Parsley.on('field:error', function() {
// This global callback will be called for any field that fails validation.
console.log('Validation failed for: ', this.$element);
});
Is there any way I can show with parsley a validation error message if hidden field is blank on form submit? I know I can do it without parsley, just checking if field is blank on submit, but as the other form fields are being validated through parsley I would like to know a way to show parsley error message somewhere in the form by parsley.
Assuming you have removed the "type=hidden" part of the excluded option, it should work fine.
Tip: You should trigger an 'input' event on your hidden field whenever you modify it.
Post a working example if it still doesn't work.
Related
I have custom validation in email input field, which is being triggered by form.reset(), which reset the form (After user successfully submit form).
I was wondering how to not trigger validation after user submit and reset the form?
For anyone running into this issue in future - you could also use form.restart() which will both reset the form and field state for all fields. This is perfect for when your initial form values trigger validations.
See FormAPI docs here
I used following method to get rid of validation after successfully submission and resetting of the form.
form.reset();
form.resetFieldState('email');
It's available under
FormRenderProps > FormApi
I have a form. This form contains array of products i.e
[{"productId":"12121212","count":5},{"productId":"22222222","count":6}]
What i need is to :
Validate the form on client and disable submit when any of product array fields are invalid.
Can i use validators like i work plain form fields and check like:
myForm.product[i].productId.$invalid,
myForm.product[i].productId.$error.required
?
Validate the form on server when submit and pass back errors to client. Now i attach service prop 'error', but it seems not common way to angularjs validation.
Plunker link:https://plnkr.co/edit/kbLs3SJE5ybNxIvo3ynq
Any suggestions. Thanks!
It is best to validate the input fields on client side first. To disable the submit button based on validation you can use ng-disabled="myForm.$invalid" on submit button. This will work for HTML validations on input fields like required, ng-minlength, ng-maxlength, etc.
However for complex validations on field, you can write a function and call it: ng-disabled="isFormValid()". This function will iterate through all values and check if they are valid.
I am setting input field to invalid from javascript like this:
$scope.formName.fieldName.$setValidity("string", false);
This is working, but it affects the view only after clicking in a input field and then clicking out of it.
How can I change it in order to see the invalid field immediatelly?
You'll need to attach an ng-change="checker(model)" to your input field. Then just apply an ng-class to it to check for formName.fieldName.$error.string (since you put string as the error key) or you can also do formName.fieldName.$invalid && !formName.fieldName.$pristine
I've attached this codepen for you to play around with and see how to apply an invalid class on the field without having to lose focus on it.
Hope that helps!
I know I can call $setValidity('errorkey', true) to clear a specific validation error from a field. However is there a way to clear all the validation errors from a single field?
I tried $setValidity(true) but that obvious didn't work. I guess I could loop through $error for the field and then call $setValidity. Is there an easier way?
Please use following line to remove all validations error
formName is the form name ..
$scope.formName.$setUntouched();-- set form to untouched
$scope.formName.$setPristine();--remove all validation error
I added field validation attributes like "required" and "pattern" in my form, and the form is inside a ng-controller. The validation works. But it seems the validations are triggered on page load, and I see all the fields are marked as invalid with error message when the page load.
I tried to add "novalidation" attribute to the form as indicated in the examples on AngularJS website, but no luck.
I would like to have the validation triggered the first time the user tries to interact with it. How can I do that?
Update
Here's an example https://jsfiddle.net/davidshen84/00t197gx/
<div class="mdl-cell mdl-cell-6-col mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="screenname" pattern="[a-zA-Z0-9]{3,}" ng-model="comment.screenname" required/>
<label class="mdl-textfield__label" for="screenname">Screen Name</label>
</div>
On load, you should see all the input fields had a red line under them which indicate they are in the invalid state. And the line turns to blue once validated.
Note: The style on the check button does not work...should not be a concern in the problem.
Angular is going to check the form the same way at any point (load or later) and render the result. If you don't want to display the results on load, add logic to check whether the form has been interacted with. You can hide your error messages using ng-if="yourFormName.$dirty", or display according to the status of an individual field with yourFormName.yourFieldName.$dirty.
Click here for live demo.
What is currently implemented (wrong IMHO) is that MDL automatically validates input and doesn't mind "novalidate" form attribute. I had to implement check for empty input value (skip validation and remove is-invalid class) and, since angular form validation requires "novalidate" attribute, check:
if (input.form.novalidate = true) // skip validation
that way you can actually turn off mdl validation and leave everything to angular.
One more thing is actually required. You can create angular directive which validates expression and add is-invalid class if necessary:
div class="mdl-textfield" mdl-validator="form.email.$error"