Currently I use ng-pattern="/^[0-9]+(\.[0-9]{2})$/"
to enfore a float input with exactly 2 decimals.
problem:
user input is beeing validated immediately and not only after trying to submit.
how can I change this?
Just in case anybody finds himself in a similar topic..
It's possible to delay model update and validation
see https://docs.angularjs.org/guide/forms#custom-model-update-triggers
be aware that this has serious side effects.
you should perform your controller action also delayed (usinge timeout in combination with form.$valid check) in order to prevent continuing with invalid form data...
Related
I don't want Formik to run the validaiton schema of a field if it's equal to its initial value at any point. I have looked everywhere on the web to achieve this but unfortunately could not find a solution.
The docs are very convoluted in regards to this simple functionality. There is a prop called isInitialValid but it's deprecated and no longer works. It says to use initialErrors as an alternative but there is no explanation on how to use it, especially in the same way I need.
Screenshot: formik_docs
( https://formik.org/docs/api/formik )
If there is no way of achieving this in Formik then I thought perhaps to achieve it inside of the Yup validation schema itself, and so I would want to tell Yup to "run this entire validation only if a certain condition is met" (if the given value is not equal to initial value). So that is one of the potential solutions I tried implementing but I don't know how to do that with Yup. Of course it would be better if Formik has a solution, so this is plan B.
I have made simplified boilerplate code and will appreciate if answers use it. It's MUI/Formik and has the email field with an initialValue which should skip validation https://codesandbox.io/s/formik-sandbox-3bci5l?file=/src/App.js
For context: I am making a form that edits an item, so the initial values would all be filled with that item's properties, and it's possible that the dev team decides to add new validators for each property but we decided we don't want to force changes to previous values based on newly added validations. Even better would be to somehow make them into warning messages (so MUI would simply color the errors yellow) and still allow submit, but I'll put that aside for now since that would be much more complicated to achieve.
Thank you in advance for any help.
I'm validating and sanitizing user inputs from the server-side. I'm also validating it from the front-end. But I'm wondering if I should also modify the input values to match the server's requirement before sending a request.
For example, I have a form with a birthday text input in MM-dd format. But the server requires a month(MM) and a day of the month(dd) values separately. I can format the input to match the server's requirement(MM and dd), or I can just pass the value without modification and the server will do the rest. Which method is recommended?
This question is more related to UX practices then frontend itself. I believe that before server validation, frontend checks should be performed.
You shouldn't validate and you definitely shouldn't change any values during user completing the form. However the common practice is to validate fields on blur. This is when you can change fields values.
However I would be very careful with this, to avoid confusing the user. So stripping whitespaces etc. should not be a problem, but aggressive input changes should be avoided.
Also try input masking for operations like date formats.
Check for example this library
https://nosir.github.io/cleave.js/
EDIT:
I case of changing values before sending them to backend, it's perfectly fine. It's good practice to have some mapping layer, which will map between UI forms and DTOs required by backend. UI should be focused on user experience, so some extra work will be required almost every time in more complex scenarios
I want to delete validation errors generated by PHP (that is server-side) when user triggers any validation.
I can delete previous validation errors when in fact there are new errors using the errorsContainer option.
(As on the next example: http://jsfiddle.net/bzydxoL9/)
But I do want to intercept validations always, no matter if valid or invalid ones.
How can I intercept a validation?
Inventive use of errorsContainer, but it's really not meant to be used this way.
Listen to the events like field:validate instead.
I've created a directive that wraps a text input field. One of the things I plan to embed in this directive is the validation behavior when it is required, but I'm stuck on one point. You are supposed to be able to refer to the validation errors for an input field using myForm.myField.$error or myForm[myField].$error. However, because my input is created by my directive, it shows up as myForm["{{myDirectiveName"].$error. This is unacceptable because I will have many such fields and I need to distinguish between them.
Plunkr that illustrates this.
The key line that causes problems is this:
console.log( !! form["{{htTextField}}"].$error.required);
What I expect to be able to write is:
console.log( !! form[attrs.htTextField].$error.required);
Many thanks for any help.
I ended up solving this by implementing my own required directive, borrowed from angular's, and customized to modify my own scope variables. Perhaps what I observed in my question is a bug, but I'm not expert enough to fix it in angular's code.
Is it possible, or more precisely how is it possible to use RX.Net to listen to a number and different variety of (WinForms) controls' .TextChanged/.RowsChanged/.SelectionChanged events and whenever one condition is fullfilled (ControlA.Text isn't empty, ControlB.RowsCount > 0 etc) enable that one DoSomething button.
I am asking because currently we have a lengthy if/then statement in each of these events' handlers and maintaining them if the condition changes is, due to duplicate code, quite error prone and that's why, if possible, I think it would be nice to take the stream of events and put the condition in one place.
Has anyone done that?
You can use Observable.FromEventPattern in combination with Join patterns, with Observable.When, Observable.And and Observable.Then, to create observables which will fire depending on various conditions, like combinations of events. For example, consider my answer here: Reactive Extensions for .NET (Rx): Take action once all events are completed
You should be able to use .FromEventPattern() to create observables for each of those events and then use CombineLatest() to do your logic on the current overall state and determine whether your button should be enabled, in one place.