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
Related
Using react-hook-form V6. Let's say there is a text input "email" in my form. My form has 2 buttons:
The first button("save") submits the form, no validation needed. The entire form should be saved.
The second button("verify") would validate the "email" field, and then calls a custom function and do some other stuff.
Now for my "email" input control, I have this:
ref={register({
validate: {
validateEmail: (email) => {
....
}
}
})}
Then my 2nd "verify" button onClick method can trigger the email validation. All good.
But on "Save" (form submission) , I do not want validation on this "email" field. How can I do that?
I think I find the solution. Every time it seems after I posted a question, it really helps me to formulate my thoughts and guide me towards the answer.
Anyway the solution is that do not have validation tied at "register". This way "form submit" would not have the validation. Now for the 2nd button, call setError(...) when applies.
Here are 2 links that have really helped:
https://react-hook-form.com/v6/api#setError
https://www.youtube.com/watch?v=raMqvE0YyIY
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 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.
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"
I have searched for topics serverside validation but every solution is done only on submit button. How to do it from input change? if we can add function or directive on the input then how to validate the whole form when input is valid?
Doing server side validation for each input is performance issue, there will be lot of request fired to server depends on your form size , thats why most commonly they using server side validation on submit button.
But if you need to do server side validation for each input , I would suggest you to do Client side validation on ngKeyUp and server side validation on ngBlur .
AngularJs have built in validations as bellow
<input
ng-model="user.name"
[name=""]
[required=""]
[ng-required=""]
[ng-minlength=""]
[ng-maxlength=""]
[ng-pattern=""]
[ng-change=""]
[ng-trim=""]>
...
</input>
it sets the Error properties accordingly
<tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
<tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
<tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
<tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
So if "myForm.$valid" is true ,then you can trigger a backend validation.
If that clarifies you question?